/* Creare Guru. Tokens come from the logo: deep navy into sky blue, with one warm signal colour for the main action. */
:root{
  --ink:#040606;--navy:#04332D;--blue:#306D64;--sky:#6fb8a8;--mist:#e9f2f0;--paper:#f4f8f7;
  --text:#0f2623;--muted:#4a6561;--line:#d2e1dd;--signal:#D77428;--danger:#b42318;
  --pad:max(clamp(20px,5vw,64px),calc((100% - 1440px) / 2));
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
section[id]{scroll-margin-top:24px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 28px;border-radius:14px;border:1.5px solid transparent;font-weight:700;font-size:16px;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-signal{background:var(--signal);color:#1f0d02;box-shadow:0 6px 24px rgba(215,116,40,.35)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--ink)}

/* ---------- nav: floating glass pill ---------- */
.nav-wrap{position:sticky;top:14px;z-index:50;height:0}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px 24px;margin:0 max(clamp(12px,3vw,24px),calc((100% - 1440px) / 2));padding:9px 9px 9px 16px;border-radius:999px;background:rgba(4,30,27,.45);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28);color:#fff}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;letter-spacing:.06em;font-size:15px}
.brand .logo{display:flex;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.nav-links{display:flex;gap:4px;font-size:15px;font-weight:500}
.nav-links a{padding:9px 16px;border-radius:999px;color:#cfe3de;transition:background .15s,color .15s}
.nav-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-links a[aria-current="true"]{background:rgba(255,255,255,.18);color:#fff}
.nav-end{display:flex;align-items:center;gap:8px}
.nav .cta{padding:11px 22px;border-radius:999px;background:var(--signal);color:#1f0d02;font-weight:700;font-size:15px}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(clamp(40px,6vw,72px) + 92px) var(--pad) clamp(40px,6vw,72px);color:#fff;
  background:radial-gradient(900px 520px at 88% -8%,rgba(48,109,100,.75),transparent 62%),radial-gradient(800px 520px at -5% 105%,rgba(181,63,13,.42),transparent 60%),linear-gradient(165deg,#04332D 0%,#040606 75%)}
.hero>*{position:relative;z-index:1}
.hero>.hero-art{position:absolute;inset:0;z-index:0;background:url(img/feathers.svg?v=20261102c) right center/cover no-repeat;opacity:.75;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 68%);mask-image:linear-gradient(90deg,transparent 12%,#000 68%)}
.audience{max-width:560px}
.audience-q{font-size:15px;color:#bcd6d0;margin-bottom:12px}
.switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:6px;border-radius:20px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 36px rgba(0,0,0,.35)}
.switch::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.switch[data-aud="agency"]::before{transform:translateX(100%)}
.switch button{position:relative;border:0;background:transparent;text-align:left;cursor:pointer;padding:14px 20px;border-radius:15px;color:#fff;transition:color .25s}
.switch button[aria-pressed="true"]{color:var(--ink)}
.switch b{display:block;font-family:var(--display);font-size:18px}
.switch span{display:block;font-size:13px;line-height:1.35;margin-top:2px;opacity:.85}
.hero-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center;margin-top:clamp(36px,5vw,64px)}
.hero-copy{flex:1 1 540px;min-width:0}
.hero h1{font-size:clamp(40px,6vw,84px);line-height:1;font-weight:800;letter-spacing:-.035em}
.hero-sub{margin-top:28px;font-size:clamp(18px,1.6vw,21px);line-height:1.6;max-width:600px;color:#d3e6e1}
.btns{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* background option B: tech / circuit style. Preview with ?art=tech or set data-art="tech" on the hero. */
.hero>.hero-tech{display:none;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero[data-art="tech"]>.hero-tech{display:block}
.hero[data-art="tech"]>.hero-art{display:none}
.tech-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(215,116,40,.3),transparent 70%),radial-gradient(ellipse 50% 40% at 85% 20%,rgba(48,109,100,.35),transparent 70%)}
.tech-grid{position:absolute;left:-50%;right:-50%;bottom:-12%;height:110%;background:linear-gradient(rgba(111,184,168,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(111,184,168,.4) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 70%);mask-image:linear-gradient(to top,#000 10%,transparent 70%);animation:gridmove 3.5s linear infinite}
.tech-circuit{position:absolute;inset:0;background:url(img/circuit.svg?v=20261102c) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 55%);mask-image:linear-gradient(90deg,transparent 8%,#000 55%)}
.tech-scan{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(to bottom,transparent,rgba(143,208,192,.09) 50%,transparent);animation:scan 8s linear infinite}
/* background option C: binary flowing along the circuit paths. Preview with ?art=matrix */
.hero[data-art="matrix"]>.hero-tech{display:block}
.hero[data-art="matrix"]>.hero-art,.hero[data-art="matrix"] .tech-grid{display:none}
.hero[data-art="matrix"] .tech-circuit{background-image:url(img/matrix.svg?v=20261102c)}
@keyframes gridmove{to{background-position:0 64px,0 0}}
@keyframes scan{from{transform:translateY(-110%)}to{transform:translateY(420%)}}
/* animated pipeline: the one memorable moment */
.pipe{flex:1 1 380px;min-width:0;max-width:520px;padding:26px 28px 30px;border-radius:28px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28)}
.pipe-title{font-size:15px;color:#bcd6d0;margin-bottom:20px}
.pipe-flow{display:flex;flex-direction:column}
.node{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);animation:lit 6s linear infinite;animation-delay:calc(var(--n) * 1.5s)}
.node small{font-family:var(--mono);font-size:12px;font-weight:500;color:#8fd0c0;min-width:66px}
.node b{font-family:var(--display);font-size:17px;font-weight:600}
.link{position:relative;width:2px;height:34px;margin-left:34px;background:rgba(255,255,255,.2)}
.link::after{content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 14px 3px rgba(111,184,168,.8);opacity:0;animation:packet 6s linear infinite;animation-delay:calc(var(--n) * 1.5s + .25s)}
@keyframes lit{0%{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}3%,20%{border-color:var(--sky);background:rgba(111,184,168,.22);box-shadow:0 0 0 4px rgba(111,184,168,.15)}28%,100%{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);box-shadow:none}}
@keyframes packet{0%{top:0;opacity:0}2%{opacity:1}18%{top:calc(100% - 8px);opacity:1}20%,100%{top:calc(100% - 8px);opacity:0}}
.pipe-note{margin-top:22px;font-size:14px;color:#bcd6d0}

/* light variant inside case studies */
.pipe.light{max-width:none;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(4,51,45,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
.pipe.light .pipe-title{color:var(--muted)}
.pipe.light .node{background:var(--paper);border-color:var(--line);color:var(--text);animation-name:litLight}
.pipe.light .node small{color:var(--blue)}
.pipe.light .link{background:var(--line)}
.pipe.light .link::after{background:var(--blue);box-shadow:0 0 12px 3px rgba(48,109,100,.5)}
@keyframes litLight{0%{border-color:var(--line);background:var(--paper)}3%,20%{border-color:var(--blue);background:var(--mist);box-shadow:0 0 0 4px rgba(48,109,100,.1)}28%,100%{border-color:var(--line);background:var(--paper);box-shadow:none}}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-radius:24px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.22);overflow:hidden}
.trust div{padding:22px 24px;border-left:1px solid rgba(255,255,255,.16)}
.trust div:first-child{border-left:0}
.trust b{display:block;font-family:var(--display);font-size:17px;font-weight:600}
.trust span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:#bcd6d0}

/* ---------- sections ---------- */
.section{position:relative;overflow:hidden;padding:clamp(72px,9vw,120px) var(--pad)}
.section>*{position:relative;z-index:1}
.blob{position:absolute!important;border-radius:50%;pointer-events:none;z-index:0!important;filter:blur(100px)}
.h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.03em;max-width:820px}
.lead{margin-top:18px;font-size:19px;line-height:1.6;color:var(--muted);max-width:640px}

/* services bento: the specialty leads */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:52px}
.tile{grid-column:span 4;padding:32px;border-radius:24px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 36px rgba(4,51,45,.08),inset 0 1px 0 #fff}
.tile.lead-tile{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;color:#fff;background:linear-gradient(160deg,#04332D,#306D64);border:0;box-shadow:0 24px 60px rgba(4,51,45,.3)}
.tile.lead-tile p{color:#d3e6e1}
.tile.lead-tile .tags{color:#8fd0c0}
.tile.wide{grid-column:span 6}
.tile.full{grid-column:span 12}
.tile h3{font-size:24px;font-weight:700;margin-bottom:12px}
.tile.lead-tile h3{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.03em;line-height:1.05}
.tile p{font-size:16px;line-height:1.65;color:var(--muted)}
.tags{margin-top:18px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--blue)}

/* case studies: tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.tab{padding:12px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--text);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tab:hover{border-color:var(--blue)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.case{display:flex;flex-wrap:wrap;gap:48px;margin-top:28px;padding:clamp(24px,3.4vw,48px);border-radius:28px;background:var(--paper);border:1px solid var(--line)}
.case-text{flex:1 1 400px;min-width:0}
.case h3{font-size:clamp(26px,2.8vw,36px);line-height:1.1;font-weight:800}
.client{margin-top:6px;font-size:15px;color:var(--muted)}
.case h4{margin:26px 0 6px;font-family:var(--display);font-size:18px;font-weight:700}
.case p{font-size:17px;line-height:1.65;color:var(--text)}
.case-diagram{flex:1 1 340px;min-width:0}
.case .tags{margin-top:20px}

/* how I build: a spec sheet, not cards */
.dark{background:radial-gradient(800px 480px at 100% 0%,rgba(48,109,100,.4),transparent 60%),var(--ink);color:#fff}
.dark .h2{color:#fff}
.spec{margin:52px 0 0;display:flex;flex-direction:column}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;padding:28px 0;border-top:1px solid rgba(255,255,255,.16)}
.spec-row:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.spec dt{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em}
.spec dd{margin:0;font-size:17px;line-height:1.65;color:#bcd6d0;max-width:680px}

/* engagement */
.engage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px}
.engage{position:relative;display:flex;flex-direction:column;padding:36px 32px;border-radius:24px;background:#fff;border:1.5px solid var(--line)}
.engage .for{font-size:14px;font-weight:600;color:var(--blue)}
.engage h3{margin:10px 0 12px;font-size:28px;font-weight:800}
.engage p{font-size:16px;line-height:1.65;color:var(--muted)}
.engage.featured{background:linear-gradient(160deg,#04332D,#306D64);border-color:transparent;color:#fff;box-shadow:0 24px 60px rgba(4,51,45,.3)}
.engage.featured .for{color:#8fd0c0}
.engage.featured p{color:#d3e6e1}
.engage .badge{align-self:flex-start;margin-bottom:16px;padding:5px 12px;border-radius:999px;background:var(--signal);color:#1f0d02;font-size:13px;font-weight:700}

/* about */
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.split>div{flex:1 1 440px;min-width:0}
.fact{padding:20px 0;border-top:1px solid var(--line)}
.fact b{font-family:var(--display);font-size:19px}
.fact div{margin-top:4px;font-size:16px;line-height:1.6;color:var(--muted)}
.expect{padding:36px;border-radius:24px;background:var(--paper);border:1px solid var(--line)}
.expect h3{font-size:24px;font-weight:800;margin-bottom:18px}
.expect ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.6}

/* contact */
.contact{position:relative;overflow:hidden;padding:clamp(72px,9vw,120px) var(--pad);color:#fff;
  background:radial-gradient(800px 520px at 0% 0%,rgba(48,109,100,.7),transparent 60%),radial-gradient(700px 480px at 100% 100%,rgba(181,63,13,.35),transparent 60%),linear-gradient(160deg,#04332D 0%,#040606 80%)}
.contact>*{position:relative;z-index:1}
.contact h2{font-size:clamp(36px,4.8vw,60px);line-height:1.02;font-weight:800;letter-spacing:-.03em}
.contact .lead{color:#d3e6e1}
.phone-box{margin-top:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fine{margin-top:28px;font-size:15px;line-height:1.6;color:#bcd6d0;max-width:520px}
.form{flex:1 1 500px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3.2vw,40px);border-radius:28px;color:var(--text);background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 64px rgba(0,0,0,.4)}
.fields{display:flex;flex-wrap:wrap;gap:16px}
.field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;min-width:0}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.5px solid #c3d6d1;border-radius:12px;background:#fff;color:var(--text);font-weight:400;min-width:0;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(48,109,100,.15)}
.field textarea{resize:vertical;min-height:120px}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field-err{font-size:13px;font-weight:500;color:var(--danger)}
.counter{align-self:flex-end;font-size:12.5px;font-weight:500;color:var(--muted)}
.form fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.form legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600}
.check{display:flex;gap:10px;align-items:center;font-size:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--muted)}
.consent input{margin-top:3px}
.status{padding:12px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.status.err{background:#fdecec;color:#7f1d1d}
.submit{padding:17px 28px;border:0;border-radius:14px;background:var(--navy);color:#fff;font-weight:700;font-size:17px;cursor:pointer;transition:background .15s}
.submit:hover{background:var(--blue)}
.submit:disabled{opacity:.6;cursor:progress}
.note{font-size:13px;line-height:1.5;color:var(--muted)}
.sent{flex:1 1 500px;min-width:0;padding:clamp(28px,4vw,48px);border-radius:28px;background:rgba(255,255,255,.93);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.4)}
.sent h3{font-size:30px;font-weight:800}
.sent p{margin-top:12px;color:var(--muted)}
.sent .btn{margin-top:24px}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:36px var(--pad);background:var(--ink);color:#a9b2e6;font-size:15px}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer a:hover{color:#fff}

/* ---------- motion: answers what the visitor does ---------- */
.tile>*,.engage>*{position:relative}
.tile{position:relative}
.tile,.engage{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tile::before,.engage::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(215,116,40,.2),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.tile.lead-tile::before,.engage.featured::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(143,208,192,.3),transparent 60%)}
@media (hover:hover){
  .tile:hover,.engage:hover{transform:translateY(-5px);box-shadow:0 18px 48px rgba(4,51,45,.2)}
  .tile:hover::before,.engage:hover::before{opacity:1}
}
.sw-a{animation:swapIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sw-a .badge{animation:popIn .6s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sw-a,.sw-a .badge{animation:none!important}.tile:hover,.engage:hover{transform:none}}
/* ---------- easter egg: red pill or blue pill (matrix background only) ---------- */
.pill-hint{display:none;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#bcd6d0;font-family:var(--mono);font-size:12px;cursor:pointer;opacity:.8;transition:opacity .2s,background .2s}
.pill-hint:hover{opacity:1;background:rgba(255,255,255,.14)}
.hero>.pill-hint{position:absolute;top:104px;right:var(--pad);z-index:2}
.hero[data-art="matrix"]>.pill-hint{display:inline-flex}
.cap{display:inline-block;width:30px;height:14px;border-radius:999px;background:linear-gradient(90deg,#e5483f 50%,#3b6cff 50%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cap.red{background:#e5483f}
.cap.blue{background:#3b6cff}
.pill-hint .cap{animation:capTilt 3s ease-in-out infinite}
@keyframes capTilt{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.pill-dialog{border:1px solid rgba(255,255,255,.25);border-radius:28px;padding:clamp(24px,4vw,40px);width:min(92vw,520px);background:rgba(4,30,27,.84);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pill-dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pill-dialog h2{font-size:34px;margin:0 0 10px}
.pill-dialog p{color:#cfe3de;margin:0 0 24px}
.pill-row{display:flex;flex-wrap:wrap;gap:14px}
.pill-btn{flex:1 1 200px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px;border-radius:20px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;text-align:left;transition:transform .15s,background .15s,border-color .15s}
.pill-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.pill-red:hover{border-color:#e5483f}
.pill-blue:hover{border-color:#3b6cff}
.pill-btn b{font-family:var(--display);font-size:20px}
.pill-btn small{color:#bcd6d0;font-size:14px}
.pill-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;padding:12px 20px;border-radius:999px;background:rgba(4,30,27,.92);border:1px solid rgba(255,255,255,.25);color:#fff;font-family:var(--mono);font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.pill-toast.show{animation:toastIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
.tech-words{display:none;position:absolute;inset:0;background:url(img/matrix-words.svg?v=20261102c) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 55%);mask-image:linear-gradient(90deg,transparent 8%,#000 55%);opacity:0;transition:opacity 1.4s ease}
.hero[data-art="matrix"] .tech-words{display:block}
.tech-circuit{transition:opacity 1.4s ease}
.hero[data-reveal="words"] .tech-words{opacity:1}
.hero[data-reveal="words"] .tech-circuit{opacity:0}
/* ---------- tablet + phone ---------- */
@media (max-width:1000px){
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust div:nth-child(3){border-left:0}
  .trust div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile,.tile.wide,.tile.full,.tile.lead-tile{grid-column:span 6;grid-row:auto;min-height:0}
  .engage-grid{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .nav .cta{display:none}
  .nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);flex-direction:column;padding:10px;border-radius:28px;background:rgba(4,30,27,.78);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.25);box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 18px;font-size:17px}
  .hero-grid{gap:40px}
  .hero>.hero-art{opacity:.4;-webkit-mask-image:none;mask-image:none}
  .tech-circuit{opacity:.55;-webkit-mask-image:none;mask-image:none}
  .hero>.pill-hint{position:relative;top:auto;right:auto;margin:0 0 22px;min-height:44px;padding:8px 18px 8px 14px;font-size:13px}
  .hero[data-reveal="words"] .tech-words{opacity:.55;-webkit-mask-image:none;mask-image:none}
  .trust{grid-template-columns:1fr}
  .trust div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .trust div:first-child{border-top:0}
  .case{gap:32px}
  .footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .node,.link::after,.tech-grid,.tech-scan{animation:none!important}
  .link::after{display:none}
}