/* brainydesigner.com -- style.css -- Site 38
   DARK TECH B2B -- MIXED MEGA+2-LEVEL+SIMPLE NAV -- OVERSIZED SYNE TYPOGRAPHY HERO
   Syne (distinctive geometric ExtraBold display) + Plus Jakarta Sans (clean) -- BOTH NEW in 38-site series
   Palette: Near-Black #0A0A0F + Surface #141418 + Electric Blue #2563EB + Acid Yellow #C8F400 + Off-White #F7F8FC
   CSS prefix: brd-  JS: BRD  PHP prefix: brd_  Image prefix: brd-
   NAV: MEGA DROPDOWN (Services) + TWO-LEVEL (Studio/Work) + SIMPLE LINKS (Pricing/FAQ/Contact) -- FIRST IN SERIES
   HERO: DARK TECH -- oversized left-aligned Syne ExtraBold, acid yellow highlight, metric pills right
   /services/index.php: ALWAYS in /services/ folder (CRITICAL)
   CONTAINED: brd-shell max-width:1300px
   Location: C. Corneta, 13, 41006 Sevilla, Spain | EUR | EN + ES
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --brd-black:    #0A0A0F;
  --brd-surface:  #141418;
  --brd-surface2: #1C1C24;
  --brd-blue:     #2563EB;
  --brd-blue2:    #1D4ED8;
  --brd-yellow:   #C8F400;
  --brd-yellow2:  #A8CC00;
  --brd-white:    #F7F8FC;
  --brd-white2:   #E8EAF0;
  --brd-slate:    #6B7280;
  --brd-slate2:   #4B5563;
  --brd-line:     rgba(247,248,252,.06);
  --brd-line2:    rgba(37,99,235,.2);
  --brd-ease:     .18s ease;
  --brd-bar-h:    64px;
  --shell-w:      1300px;
  --shell-px:     2rem;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--brd-black); color:var(--brd-white); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul,ol { list-style:none; }
p { margin-bottom:.7rem; font-size:0.9rem; line-height:1.9; }
p:last-child { margin-bottom:0; }

h1,h2,h3 { font-family:'Syne',system-ui,sans-serif; font-weight:800; }

/* CONTAINED */
.brd-shell { max-width:var(--shell-w); margin:0 auto; padding:0 var(--shell-px); }

/* Tag */
.brd-tag { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brd-yellow); display:inline-flex; align-items:center; gap:.3rem; }

/* Buttons */
.brd-btn-blue { display:inline-flex; align-items:center; gap:.3rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; font-weight:700; background:var(--brd-blue); color:#fff; padding:.62rem 1.8rem; border-radius:6px; transition:all var(--brd-ease); white-space:nowrap; }
.brd-btn-blue:hover { background:var(--brd-blue2); transform:translateY(-1px); }
.brd-btn-yellow { display:inline-flex; align-items:center; gap:.3rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; font-weight:700; background:var(--brd-yellow); color:var(--brd-black); padding:.62rem 1.8rem; border-radius:6px; transition:all var(--brd-ease); white-space:nowrap; }
.brd-btn-yellow:hover { background:var(--brd-yellow2); transform:translateY(-1px); }
.brd-btn-outline { display:inline-flex; align-items:center; gap:.3rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; font-weight:700; background:transparent; color:var(--brd-white); padding:.6rem 1.8rem; border:1.5px solid rgba(247,248,252,.15); border-radius:6px; transition:all var(--brd-ease); white-space:nowrap; }
.brd-btn-outline:hover { border-color:var(--brd-blue); color:var(--brd-blue); }
.brd-btn-outline-dk { display:inline-flex; align-items:center; gap:.3rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; font-weight:700; background:transparent; color:var(--brd-black); padding:.6rem 1.8rem; border:1.5px solid rgba(10,10,15,.2); border-radius:6px; transition:all var(--brd-ease); white-space:nowrap; }
.brd-btn-outline-dk:hover { border-color:var(--brd-blue); color:var(--brd-blue); }
.brd-tlink { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; font-weight:700; color:var(--brd-yellow); display:inline-flex; align-items:center; gap:.3rem; transition:gap var(--brd-ease); }
.brd-tlink:hover { gap:.5rem; }

/* =====================================================
   NAV: MIXED MEGA + TWO-LEVEL + SIMPLE -- FIRST IN 38-SITE SERIES
   
   1. Services -> MEGA DROPDOWN: full-width panel with 3x2 service cards
   2. Work -> TWO-LEVEL: Portfolio, Case Studies
   3. Studio -> TWO-LEVEL: About, Process
   4. Pricing -> simple link
   5. FAQ -> simple link  
   6. Contact -> simple link
   
   Sticky dark nav, becomes slightly less transparent on scroll
   Nav font: Plus Jakarta Sans 0.94rem (bigger than body 0.9rem)
   ===================================================== */
.brd-nav { position:sticky; top:0; z-index:600; height:var(--brd-bar-h); background:rgba(10,10,15,.85); border-bottom:1px solid var(--brd-line); backdrop-filter:blur(12px); transition:background var(--brd-ease); }
.brd-nav.brd-scrolled { background:rgba(10,10,15,.97); border-bottom-color:rgba(247,248,252,.05); }
.brd-nav-inner { height:100%; max-width:var(--shell-w); margin:0 auto; padding:0 var(--shell-px); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; position:relative; }
/* Logo */
.brd-logo { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:800; color:var(--brd-white); letter-spacing:-.02em; white-space:nowrap; display:flex; align-items:center; gap:.4rem; }
.brd-logo em { color:var(--brd-blue); font-style:normal; }
.brd-logo-dot { width:6px; height:6px; background:var(--brd-yellow); border-radius:50%; flex-shrink:0; }
/* Nav links -- Plus Jakarta Sans 0.94rem */
.brd-nav-items { display:flex; align-items:center; gap:0; }
.brd-nav-item { position:relative; }
.brd-nav-lnk { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.94rem; font-weight:600; color:rgba(247,248,252,.6); padding:.25rem .75rem; display:flex; align-items:center; gap:.2rem; cursor:pointer; transition:color var(--brd-ease); white-space:nowrap; border:none; background:none; }
.brd-nav-lnk:hover,.brd-nav-item:hover > .brd-nav-lnk,.brd-nav-lnk.brd-nav-on { color:var(--brd-white); }
.brd-nav-caret { display:inline-block; font-size:0.65rem; opacity:.4; transition:transform .15s; }
.brd-nav-item:hover > .brd-nav-lnk .brd-nav-caret { transform:rotate(180deg); }

/* MEGA DROPDOWN -- Services (3x2 service card grid) */
.brd-mega { position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:860px; background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:10px; padding:1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; transform:translateX(-50%) translateY(-6px); z-index:700; }
.brd-nav-item:hover .brd-mega { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.brd-mega-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-bottom:1rem; }
.brd-mega-card { padding:.85rem; border-radius:8px; border:1px solid rgba(247,248,252,.04); transition:all .15s; display:block; }
.brd-mega-card:hover { background:var(--brd-surface2); border-color:var(--brd-line2); }
.brd-mega-ico { width:16px; height:16px; color:var(--brd-blue); margin-bottom:.4rem; }
.brd-mega-nm { font-family:'Syne',sans-serif; font-size:0.82rem; font-weight:700; color:var(--brd-white); margin-bottom:.1rem; line-height:1.2; }
.brd-mega-tg { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.68rem; color:rgba(247,248,252,.3); line-height:1.4; }
.brd-mega-pr { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; color:var(--brd-yellow); margin-top:.3rem; font-weight:700; }
.brd-mega-foot { border-top:1px solid var(--brd-line); padding-top:.8rem; display:flex; justify-content:space-between; align-items:center; }

/* TWO-LEVEL DROPDOWN -- Work, Studio */
.brd-drop { position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%) translateY(-5px); min-width:160px; background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:8px; padding:.4rem; box-shadow:0 12px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:700; }
.brd-nav-item:hover .brd-drop { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.brd-drop a { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.86rem; font-weight:500; color:rgba(247,248,252,.55); padding:.45rem .75rem; border-radius:5px; transition:all .12s; }
.brd-drop a:hover { background:var(--brd-surface2); color:var(--brd-white); }

/* Right side */
.brd-nav-right { display:flex; align-items:center; gap:.5rem; }
.brd-nav-lang { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.68rem; font-weight:700; color:rgba(247,248,252,.4); padding:.2rem .55rem; border:1px solid rgba(247,248,252,.1); border-radius:4px; transition:all var(--brd-ease); }
.brd-nav-lang:hover { border-color:var(--brd-blue); color:var(--brd-blue); }
.brd-nav-cta { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; font-weight:700; background:var(--brd-blue); color:#fff; padding:.35rem 1rem; border-radius:5px; transition:background var(--brd-ease); white-space:nowrap; }
.brd-nav-cta:hover { background:var(--brd-blue2); }
.brd-nav-mob-btn { display:none; color:rgba(247,248,252,.7); }
/* Mobile overlay */
.brd-mob-overlay { display:none; position:fixed; inset:0; background:var(--brd-black); z-index:598; padding:calc(var(--brd-bar-h) + 1.5rem) var(--shell-px) 2rem; overflow-y:auto; }
.brd-mob-overlay.brd-mob-vis { display:flex; flex-direction:column; gap:.15rem; }
.brd-mob-lnk { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:rgba(247,248,252,.4); padding:.2rem 0; border-bottom:1px solid rgba(247,248,252,.04); transition:color var(--brd-ease); display:block; }
.brd-mob-lnk:hover { color:var(--brd-white); }

/* =====================================================
   HERO -- DARK TECH OVERSIZED TYPOGRAPHY
   Very dark bg, massive left-aligned Syne ExtraBold
   Acid yellow highlight block on key word
   Right side: metric pill stack + dark UI mockup preview
   Completely unique in 38-site series
   ===================================================== */
.brd-hero { min-height:100vh; background:var(--brd-black); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; position:relative; }
.brd-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 80%,rgba(37,99,235,.06) 0%,transparent 50%); pointer-events:none; }
.brd-hero-left { padding:calc(var(--brd-bar-h) + 5rem) var(--shell-px) 5rem calc(max(var(--shell-px),(100vw - var(--shell-w))/2) + var(--shell-px)); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.brd-hero-eyebrow { margin-bottom:2rem; }
.brd-hero-h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(3rem,5.5vw,6.5rem); line-height:.95; letter-spacing:-.03em; color:var(--brd-white); margin-bottom:2rem; }
/* Acid yellow highlight: wraps the entire 'actually buy.' phrase */
.brd-hero-highlight { background:var(--brd-yellow); color:var(--brd-black); display:inline; padding:0 .15em; border-radius:3px; }
.brd-hero-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; color:rgba(247,248,252,.4); max-width:38ch; line-height:1.8; margin-bottom:2.5rem; }
.brd-hero-btns { display:flex; gap:.5rem; flex-wrap:wrap; }
.brd-hero-right { background:var(--brd-surface); border-left:1px solid var(--brd-line); position:relative; display:flex; flex-direction:column; justify-content:center; padding:5rem 3rem 5rem 4rem; gap:1rem; overflow:hidden; }
.brd-hero-right::before { content:''; position:absolute; inset:0; background:url('/assets/svg/brd-deco-grid.svg') center center/200px 200px; opacity:.6; pointer-events:none; }
/* Metric pills on hero right */
.brd-metric-pill { background:var(--brd-surface2); border:1px solid var(--brd-line2); border-radius:8px; padding:.8rem 1.2rem; display:flex; align-items:center; gap:1rem; position:relative; z-index:1; transition:border-color var(--brd-ease); }
.brd-metric-pill:hover { border-color:var(--brd-blue); }
.brd-mp-n { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--brd-yellow); line-height:1; }
.brd-mp-l { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.68rem; font-weight:600; color:rgba(247,248,252,.3); text-transform:uppercase; letter-spacing:.12em; }
.brd-hero-mockup { background:var(--brd-black); border:1px solid var(--brd-line2); border-radius:8px; padding:1rem; position:relative; z-index:1; }
.brd-mockup-bar { display:flex; gap:.3rem; align-items:center; margin-bottom:.75rem; }
.brd-mockup-dot { width:7px; height:7px; border-radius:50%; background:rgba(247,248,252,.08); }
.brd-mockup-row { height:6px; background:rgba(247,248,252,.06); border-radius:3px; margin-bottom:.3rem; }
.brd-mockup-row.brd-w80 { width:80%; }
.brd-mockup-row.brd-w55 { width:55%; }
.brd-mockup-row.brd-w70 { width:70%; }
.brd-mockup-accent { height:6px; background:var(--brd-blue); border-radius:3px; margin-bottom:.3rem; width:40%; opacity:.5; }
.brd-mockup-yellow { height:4px; background:var(--brd-yellow); border-radius:3px; width:25%; opacity:.6; }

/* =====================================================
   SERVICES -- surface bg, horizontal scroll list + cards
   ===================================================== */
.brd-svc-zone { padding:8rem 0; background:var(--brd-surface); }
.brd-svc-h2 { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,6vw,6rem); font-weight:800; color:var(--brd-white); line-height:.9; letter-spacing:-.025em; margin-bottom:.4rem; }
.brd-svc-h2 em { color:var(--brd-blue); font-style:normal; }
.brd-svc-subhd { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; color:var(--brd-slate); max-width:48ch; margin-bottom:3.5rem; line-height:1.85; }
.brd-svc-list { display:flex; flex-direction:column; gap:.5rem; }
.brd-svc-row { display:grid; grid-template-columns:40px 2fr 1fr auto; gap:2rem; align-items:center; padding:1.2rem 1.5rem; border:1px solid var(--brd-line); border-radius:8px; background:var(--brd-surface2); transition:all var(--brd-ease); cursor:pointer; }
.brd-svc-row:hover { border-color:var(--brd-blue); background:rgba(37,99,235,.05); }
.brd-svc-row-ico { width:18px; height:18px; color:var(--brd-blue); }
.brd-svc-row:hover .brd-svc-row-ico { color:var(--brd-yellow); }
.brd-svc-row-nm { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--brd-white); }
.brd-svc-row-tg { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; color:var(--brd-slate); line-height:1.6; max-width:40ch; }
.brd-svc-row-del { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brd-slate2); }
.brd-svc-row-price { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800; color:var(--brd-white); white-space:nowrap; text-align:right; }
.brd-svc-row:hover .brd-svc-row-price { color:var(--brd-blue); }

/* =====================================================
   TESTIMONIALS -- black bg, horizontal scroll cards
   ===================================================== */
.brd-voice-zone { padding:8rem 0; background:var(--brd-black); }
.brd-voice-h2 { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,6vw,6rem); font-weight:800; color:var(--brd-white); line-height:.9; letter-spacing:-.025em; margin-bottom:3.5rem; }
.brd-voice-h2 em { color:var(--brd-yellow); font-style:normal; }
.brd-voice-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.brd-vox { background:var(--brd-surface); border:1px solid var(--brd-line); border-radius:10px; padding:2rem; transition:border-color var(--brd-ease); }
.brd-vox:hover { border-color:var(--brd-line2); }
.brd-vox:nth-child(2) { background:var(--brd-blue); border-color:var(--brd-blue2); }
.brd-vox:nth-child(4) { background:rgba(200,244,0,.08); border-color:rgba(200,244,0,.15); }
.brd-vq { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.92rem; line-height:1.75; margin-bottom:1rem; }
.brd-vox:nth-child(1) .brd-vq,.brd-vox:nth-child(3) .brd-vq { color:rgba(247,248,252,.45); }
.brd-vox:nth-child(2) .brd-vq { color:rgba(247,248,252,.85); }
.brd-vox:nth-child(4) .brd-vq { color:var(--brd-yellow); }
.brd-vwho { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; font-weight:700; }
.brd-vox:nth-child(1) .brd-vwho,.brd-vox:nth-child(3) .brd-vwho { color:rgba(247,248,252,.3); }
.brd-vox:nth-child(2) .brd-vwho { color:rgba(247,248,252,.65); }
.brd-vox:nth-child(4) .brd-vwho { color:rgba(200,244,0,.6); }
.brd-vwin { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.56rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:.1rem; }
.brd-vox:nth-child(1) .brd-vwin,.brd-vox:nth-child(3) .brd-vwin { color:rgba(37,99,235,.4); }
.brd-vox:nth-child(2) .brd-vwin { color:rgba(247,248,252,.4); }
.brd-vox:nth-child(4) .brd-vwin { color:rgba(200,244,0,.4); }

/* =====================================================
   PROCESS -- surface bg
   ===================================================== */
.brd-proc-zone { padding:8rem 0; background:var(--brd-surface); }
.brd-proc-h2 { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,6vw,6rem); font-weight:800; color:var(--brd-white); line-height:.9; letter-spacing:-.025em; margin-bottom:3.5rem; }
.brd-proc-h2 em { color:var(--brd-blue); font-style:normal; }
.brd-proc-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.brd-proc-card { border-top:2px solid var(--brd-line); padding-top:1.2rem; }
.brd-proc-n { font-family:'Syne',sans-serif; font-size:3.5rem; font-weight:800; color:rgba(247,248,252,.04); line-height:1; margin-bottom:.4rem; }
.brd-proc-t { font-family:'Syne',sans-serif; font-size:0.96rem; font-weight:700; color:var(--brd-white); margin-bottom:.25rem; }
.brd-proc-d { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; color:var(--brd-slate); line-height:1.85; }

/* =====================================================
   FAQ -- black bg, accordion
   ===================================================== */
.brd-faq-zone { padding:8rem 0; background:var(--brd-black); }
.brd-faq-h2 { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,6vw,6rem); font-weight:800; color:var(--brd-white); line-height:.9; letter-spacing:-.025em; margin-bottom:3.5rem; }
.brd-faq-h2 em { color:var(--brd-yellow); font-style:normal; }
.brd-faq-cols { display:grid; grid-template-columns:2fr 1fr; gap:5rem; }
.brd-faq-item { border-bottom:1px solid var(--brd-line); }
.brd-faq-btn { width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; padding:.85rem 0; background:none; border:none; cursor:pointer; text-align:left; }
.brd-fq { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.96rem; font-weight:600; color:rgba(247,248,252,.65); line-height:1.3; }
.brd-faq-item.brd-fq-open .brd-fq { color:var(--brd-white); }
.brd-fq-tog { font-size:1.4rem; color:var(--brd-slate); flex-shrink:0; transition:transform .2s,color .2s; font-family:'Syne',sans-serif; font-weight:800; }
.brd-faq-item.brd-fq-open .brd-fq-tog { transform:rotate(45deg); color:var(--brd-yellow); }
.brd-faq-ans { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.brd-faq-item.brd-fq-open .brd-faq-ans { max-height:400px; }
.brd-faq-a { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; color:var(--brd-slate); line-height:1.9; padding:0 0 1rem; }
.brd-faq-aside { background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:10px; padding:2.5rem; position:sticky; top:5rem; }
.brd-faq-aside h3 { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; color:var(--brd-white); margin-bottom:.3rem; }
.brd-faq-aside p { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.82rem; color:var(--brd-slate); margin-bottom:1.5rem; line-height:1.85; }

/* =====================================================
   BUILDER
   ===================================================== */
.brd-build-pg { padding:8rem 0 5rem; background:var(--brd-black); min-height:100vh; }
.brd-build-h1 { font-family:'Syne',sans-serif; font-size:clamp(4rem,10vw,9rem); font-weight:800; color:var(--brd-white); line-height:.86; letter-spacing:-.03em; }
.brd-build-h1 em { color:var(--brd-yellow); font-style:normal; }
.brd-build-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; color:var(--brd-slate); max-width:44ch; margin:.4rem 0 3rem; line-height:1.85; }
.brd-build-cols { display:grid; grid-template-columns:1.8fr 1fr; gap:4rem; align-items:start; }
.brd-build-sec { margin-bottom:2.5rem; }
.brd-build-hd { border-bottom:1px solid var(--brd-line); padding-bottom:.5rem; margin-bottom:1.2rem; display:flex; align-items:center; gap:.7rem; }
.brd-build-no { font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; color:rgba(247,248,252,.04); line-height:1; }
.brd-build-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brd-slate); }
/* Tile grid */
.brd-tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.brd-svc-tile { padding:.85rem 1rem; border:1px solid var(--brd-line); border-radius:8px; cursor:pointer; user-select:none; background:var(--brd-surface2); transition:all var(--brd-ease); }
.brd-svc-tile:hover { border-color:var(--brd-line2); }
.brd-svc-tile.brd-sel { border-color:var(--brd-blue); background:rgba(37,99,235,.08); }
.brd-stile-dot { width:8px; height:8px; border:1.5px solid var(--brd-slate); border-radius:50%; margin-bottom:.4rem; }
.brd-svc-tile.brd-sel .brd-stile-dot { background:var(--brd-blue); border-color:var(--brd-blue); }
.brd-stile-nm { font-family:'Syne',sans-serif; font-size:0.88rem; font-weight:700; color:var(--brd-white); margin-bottom:.2rem; }
.brd-svc-tile.brd-sel .brd-stile-nm { color:var(--brd-blue); }
.brd-stile-del { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.58rem; color:var(--brd-slate); }
.brd-stile-pr { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; color:var(--brd-white); margin-top:.4rem; }
.brd-svc-tile.brd-sel .brd-stile-pr { color:var(--brd-yellow); }
/* Addons */
.brd-addon-row { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--brd-line); border-radius:8px; padding:.65rem 1rem; cursor:pointer; user-select:none; margin-bottom:.35rem; background:var(--brd-surface2); transition:all var(--brd-ease); }
.brd-addon-row:hover { border-color:var(--brd-line2); }
.brd-addon-row.brd-addon-on { border-color:var(--brd-blue); background:rgba(37,99,235,.07); }
.brd-addon-left { display:flex; align-items:center; gap:.45rem; }
.brd-addon-chk { width:12px; height:12px; border:1.5px solid var(--brd-slate); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--brd-ease); }
.brd-addon-row.brd-addon-on .brd-addon-chk { background:var(--brd-blue); border-color:var(--brd-blue); }
.brd-addon-row.brd-addon-on .brd-addon-chk::after { content:'\2713'; font-size:0.48rem; color:#fff; font-family:sans-serif; }
.brd-addon-nm { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.84rem; font-weight:600; color:var(--brd-white2); }
.brd-addon-amt { font-family:'Syne',sans-serif; font-size:0.96rem; font-weight:800; color:rgba(247,248,252,.4); }
.brd-addon-row.brd-addon-on .brd-addon-amt { color:var(--brd-yellow); }
/* Hours */
.brd-hrs-box { background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:8px; padding:1.2rem; }
.brd-hrs-ttl { font-family:'Syne',sans-serif; font-size:0.96rem; font-weight:700; color:var(--brd-white); margin-bottom:.1rem; }
.brd-hrs-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.6rem; color:var(--brd-slate); margin-bottom:.8rem; }
.brd-hrs-row { display:flex; align-items:center; gap:.9rem; }
.brd-hrs-big { font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; color:var(--brd-yellow); min-width:2ch; text-align:center; line-height:1; }
.brd-hrs-rng { -webkit-appearance:none; appearance:none; flex:1; height:2px; background:rgba(247,248,252,.1); outline:none; cursor:pointer; }
.brd-hrs-rng::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:var(--brd-blue); cursor:pointer; border-radius:50%; }
/* Summary */
.brd-sumbox { background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:10px; padding:2rem; position:sticky; top:5.5rem; }
.brd-sum-hd { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,248,252,.2); padding-bottom:.4rem; border-bottom:1px solid var(--brd-line); margin-bottom:.4rem; }
.brd-sum-body { min-height:48px; margin-bottom:.4rem; }
.brd-sum-row { display:flex; justify-content:space-between; gap:1rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; color:rgba(247,248,252,.28); padding:.2rem 0; border-bottom:1px solid var(--brd-line); }
.brd-sum-rv { font-family:'Syne',sans-serif; font-size:0.96rem; font-weight:700; color:var(--brd-white); }
.brd-sum-nil { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; color:rgba(247,248,252,.18); }
.brd-sum-total { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(247,248,252,.06); padding-top:.5rem; margin-top:.3rem; }
.brd-sum-tl { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.5rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,248,252,.2); }
.brd-sum-tv { font-family:'Syne',sans-serif; font-size:3.2rem; font-weight:800; color:var(--brd-yellow); line-height:1; }
.brd-sum-go { width:100%; background:var(--brd-blue); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; font-weight:700; padding:.85rem; border:none; cursor:pointer; border-radius:6px; margin-top:.9rem; transition:background var(--brd-ease); }
.brd-sum-go:hover { background:var(--brd-blue2); }
.brd-sum-go:disabled { opacity:.2; pointer-events:none; }

/* =====================================================
   CHECKOUT
   ===================================================== */
.brd-co-pg { padding:8rem 0 5rem; background:var(--brd-black); min-height:100vh; }
.brd-co-h1 { font-family:'Syne',sans-serif; font-size:clamp(4rem,10vw,9rem); font-weight:800; color:var(--brd-white); line-height:.86; letter-spacing:-.03em; }
.brd-co-h1 em { color:var(--brd-blue); font-style:normal; }
.brd-co-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; color:var(--brd-slate); max-width:44ch; margin:.4rem 0 2.5rem; line-height:1.85; }
.brd-co-cols { display:grid; grid-template-columns:1.5fr 1fr; gap:4rem; }
.brd-field { display:flex; flex-direction:column; gap:.1rem; margin-bottom:.5rem; }
.brd-flbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.54rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brd-slate); }
.brd-finp,.brd-fsel,.brd-fta { background:var(--brd-surface); border:1px solid var(--brd-line); border-radius:6px; padding:.7rem 1rem; color:var(--brd-white); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; outline:none; width:100%; transition:border-color var(--brd-ease); }
.brd-finp:focus,.brd-fsel:focus,.brd-fta:focus { border-color:var(--brd-blue); }
.brd-fpair { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.brd-ftos { display:flex; gap:.5rem; align-items:flex-start; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.82rem; color:var(--brd-slate); cursor:pointer; margin:.8rem 0; line-height:1.65; }
.brd-ftos a { color:var(--brd-blue); }
.brd-ftos input { accent-color:var(--brd-blue); flex-shrink:0; margin-top:3px; }
.brd-pay-btn { width:100%; background:var(--brd-yellow); color:var(--brd-black); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; font-weight:800; padding:.9rem; border:none; cursor:pointer; border-radius:6px; transition:background var(--brd-ease); display:flex; align-items:center; justify-content:space-between; }
.brd-pay-btn:hover { background:var(--brd-yellow2); }
.brd-order-box { background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:10px; padding:2rem; position:sticky; top:5.5rem; }
.brd-order-hd { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,248,252,.2); padding-bottom:.4rem; border-bottom:1px solid var(--brd-line); margin-bottom:.4rem; }
.brd-order-row { display:flex; justify-content:space-between; gap:1rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; color:rgba(247,248,252,.28); padding:.2rem 0; border-bottom:1px solid var(--brd-line); }
.brd-order-rv { font-family:'Syne',sans-serif; font-size:0.96rem; font-weight:700; color:var(--brd-white); }
.brd-order-total { font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; color:var(--brd-yellow); line-height:1; }

/* =====================================================
   MASTHEAD -- surface bg, centered H1
   ===================================================== */
.brd-mast { background:var(--brd-surface); padding:8rem 0 4rem; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--brd-line); }
.brd-mast::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top center,rgba(37,99,235,.08) 0%,transparent 55%); pointer-events:none; }
.brd-mast-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.brd-mast-h1 { font-family:'Syne',sans-serif; font-size:clamp(5rem,14vw,13rem); font-weight:800; color:var(--brd-white); line-height:.78; letter-spacing:-.03em; text-align:center; }
.brd-mast-h1 em { color:var(--brd-yellow); font-style:normal; }
.brd-mast-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; color:var(--brd-slate); max-width:46ch; line-height:1.88; margin-top:.8rem; text-align:center; }

/* =====================================================
   SERVICE DETAIL
   ===================================================== */
.brd-det-pg { padding:5rem 0 6rem; background:var(--brd-black); }
.brd-det-grid { display:grid; grid-template-columns:2fr 1fr; gap:5rem; }
.brd-det-body p { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.9rem; color:var(--brd-slate); line-height:1.9; margin-bottom:.85rem; }
.brd-det-body h3 { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; color:var(--brd-white); margin:2.5rem 0 .5rem; }
.brd-callout { border-left:2px solid var(--brd-yellow); padding:.6rem 1rem; background:rgba(200,244,0,.05); margin-bottom:.5rem; border-radius:0 6px 6px 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.86rem; color:var(--brd-white2); line-height:1.7; }
.brd-incl-it { display:flex; gap:.4rem; align-items:flex-start; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.86rem; color:var(--brd-slate); padding:.2rem 0; }
.brd-incl-it::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--brd-blue); flex-shrink:0; margin-top:7px; }
.brd-price-panel { background:var(--brd-surface); border:1px solid var(--brd-line2); border-radius:10px; padding:2rem; margin-bottom:1rem; }
.brd-pc-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,248,252,.25); }
.brd-pc-amt { font-family:'Syne',sans-serif; font-size:4rem; font-weight:800; color:var(--brd-yellow); line-height:1; }
.brd-pc-del { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,248,252,.2); margin-bottom:1.5rem; }
.brd-img-box { border-radius:10px; overflow:hidden; background:var(--brd-surface); }
.brd-img-box img { width:100%; aspect-ratio:4/3; object-fit:cover; }

/* =====================================================
   LEGAL
   ===================================================== */
.brd-legal-pg { padding:5rem 0; background:var(--brd-black); }
.brd-legal-doc { max-width:760px; }
.brd-legal-doc h2 { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:800; color:var(--brd-white); margin:2.5rem 0 .5rem; padding-top:2rem; border-top:1px solid var(--brd-line); }
.brd-legal-doc h2:first-child { margin-top:0; padding-top:0; border:none; }
.brd-legal-doc p { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; color:var(--brd-slate); line-height:1.9; margin-bottom:.85rem; }
.brd-legal-doc ul { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.88rem; color:var(--brd-slate); padding-left:1.4rem; list-style:disc; margin-bottom:.85rem; line-height:1.85; }
.brd-legal-doc a { color:var(--brd-blue); }
.brd-legal-meta { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; color:var(--brd-slate); margin-bottom:2rem; padding-bottom:.7rem; border-bottom:1px solid var(--brd-line); }

/* =====================================================
   FOOTER
   ===================================================== */
.brd-foot { background:var(--brd-surface); padding:5rem 0 3rem; border-top:1px solid var(--brd-line); }
.brd-foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid var(--brd-line); margin-bottom:2rem; }
.brd-foot-logo { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; color:var(--brd-white); margin-bottom:.4rem; }
.brd-foot-logo em { color:var(--brd-blue); font-style:normal; }
.brd-foot-blurb { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; color:rgba(247,248,252,.2); max-width:24ch; line-height:1.85; margin-bottom:.8rem; }
.brd-foot-biz { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.62rem; color:rgba(247,248,252,.12); line-height:2.2; }
.brd-foot-biz a { color:rgba(247,248,252,.12); transition:color var(--brd-ease); }
.brd-foot-biz a:hover { color:var(--brd-blue); }
.brd-foot-col-h { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,248,252,.2); margin-bottom:.9rem; }
.brd-foot-nav { display:flex; flex-direction:column; gap:.4rem; }
.brd-foot-nav a { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; color:rgba(247,248,252,.15); transition:color var(--brd-ease); }
.brd-foot-nav a:hover { color:var(--brd-blue); }
.brd-foot-btm { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.brd-foot-copy { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.62rem; color:rgba(247,248,252,.06); }
.brd-foot-legal { display:flex; gap:1.2rem; }
.brd-foot-legal a { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.62rem; color:rgba(247,248,252,.06); transition:color var(--brd-ease); }
.brd-foot-legal a:hover { color:var(--brd-blue); }

/* =====================================================
   COOKIE & CHAT
   ===================================================== */
.brd-cookie { position:fixed; bottom:0; left:0; right:0; z-index:600; background:var(--brd-surface); border-top:2px solid var(--brd-blue); padding:.6rem var(--shell-px); display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; transition:transform .3s; }
.brd-cookie.brd-ck-gone { transform:translateY(110%); pointer-events:none; }
.brd-ck-txt { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; color:rgba(247,248,252,.35); }
.brd-ck-txt a { color:var(--brd-blue); }
.brd-ck-yes { background:var(--brd-blue); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; font-weight:700; padding:.32rem .9rem; border:none; cursor:pointer; border-radius:4px; }
.brd-ck-no  { background:transparent; color:rgba(247,248,252,.25); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; padding:.32rem .75rem; border:1px solid rgba(247,248,252,.1); cursor:pointer; border-radius:4px; }
.brd-chat-fab { position:fixed; bottom:4.5rem; right:2rem; z-index:599; width:46px; height:46px; background:var(--brd-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; box-shadow:0 4px 20px rgba(37,99,235,.4); transition:transform .2s; }
.brd-chat-fab:hover { transform:scale(1.08); }
.brd-chat-win { position:fixed; bottom:7.5rem; right:2rem; z-index:599; width:286px; background:var(--brd-surface); border:1px solid var(--brd-line2); border-top:2px solid var(--brd-blue); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.6); opacity:0; pointer-events:none; transform:translateY(6px) scale(.97); transform-origin:bottom right; transition:opacity .2s,transform .2s; }
.brd-chat-win.brd-chat-vis { opacity:1; pointer-events:auto; transform:none; }
.brd-chat-top { padding:.7rem 1rem; background:var(--brd-surface2); border-bottom:1px solid var(--brd-line); border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center; }
.brd-chat-dot { width:7px; height:7px; border-radius:50%; background:var(--brd-yellow); animation:brd-blink 2s infinite; }
@keyframes brd-blink { 0%,100%{opacity:1}50%{opacity:.2} }
.brd-chat-who { font-family:'Syne',sans-serif; font-size:0.95rem; font-weight:700; color:var(--brd-white); }
.brd-chat-role { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.52rem; color:var(--brd-slate); }
.brd-chat-x { background:none; border:none; color:var(--brd-slate); cursor:pointer; }
.brd-chat-log { padding:.7rem; height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:.35rem; }
.brd-chat-msg { max-width:92%; padding:.38rem .75rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; line-height:1.55; border-radius:6px; }
.brd-chat-msg--bot { background:var(--brd-surface2); color:var(--brd-slate); align-self:flex-start; border:1px solid var(--brd-line); }
.brd-chat-msg--me  { background:var(--brd-blue); color:#fff; align-self:flex-end; }
.brd-chat-form { display:flex; border-top:1px solid var(--brd-line); }
.brd-chat-inp { flex:1; background:none; border:none; padding:.5rem .7rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; color:var(--brd-white); outline:none; }
.brd-chat-send { background:var(--brd-blue); color:#fff; border:none; padding:0 .75rem; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.65rem; font-weight:700; cursor:pointer; border-radius:0 0 8px 0; }

/* CONFIRM */
.brd-confirm-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:8rem 2rem 5rem; background:var(--brd-surface); }
.brd-confirm-box { max-width:420px; width:100%; background:var(--brd-black); border:1px solid var(--brd-line2); border-top:2px solid var(--brd-blue); border-radius:10px; padding:3.5rem; text-align:center; }

/* REVEAL */
.brd-rv { opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; }
.brd-rv.brd-vis { opacity:1; transform:none; }
.brd-d1{transition-delay:.07s}.brd-d2{transition-delay:.14s}.brd-d3{transition-delay:.21s}

/* RESPONSIVE */
@media(max-width:1100px) {
  .brd-hero { grid-template-columns:1fr; }
  .brd-hero-left { padding:5rem var(--shell-px); padding-top:calc(var(--brd-bar-h) + 4rem); }
  .brd-hero-right { min-height:380px; padding:3rem; }
  .brd-voice-strip { grid-template-columns:1fr 1fr; }
  .brd-det-grid,.brd-build-cols,.brd-co-cols { grid-template-columns:1fr; }
  .brd-proc-cols { grid-template-columns:1fr 1fr; }
  .brd-faq-cols { grid-template-columns:1fr; }
  .brd-foot-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .brd-nav-items,.brd-nav-right .brd-nav-cta,.brd-nav-lang { display:none; }
  .brd-nav-mob-btn { display:flex; }
}
@media(max-width:720px) {
  :root { --shell-px:1.25rem; }
  .brd-voice-strip { grid-template-columns:1fr; }
  .brd-svc-row { grid-template-columns:24px 1fr; gap:1rem; }
  .brd-svc-row-del,.brd-svc-row-price { display:none; }
  .brd-proc-cols { grid-template-columns:1fr; }
  .brd-tile-grid { grid-template-columns:1fr; }
  .brd-foot-grid { grid-template-columns:1fr; }
  .brd-fpair { grid-template-columns:1fr; }
}