/* AI Savvy (11/02): the few things the rebrand adds on top of the original stylesheets, in their tokens.
   - the colors: AI Savvy's blue on navy, as on aisavvy.us (Yossi, round 2). The original's token names stay (--gold is now
     the main accent, blue-400; --gold-2 the second, cyan), so every rule that reads them follows; the few colors the
     original wrote out by hand were changed in place to the same values
   - the opening: the official wordmark under the 3D mark, where the original had a gold picture of its own name
   - the line under "What you have at the end of the DNA": the DNA is a paid first step (Yossi, round 2, no amount)
   - the closing's second button, Calendly, beside the WhatsApp one
   - the advisor's photo ring in the advisor picture
   - contrast and polish (round 4, Yossi: "the background is too dark, some text is hard to read"): a lighter navy, the
     secondary text lighter, body text one step heavier, the industry pictures brighter; every line at least WCAG AA
     (qa/contrast.cjs) */

:root{
  --ink:#0C1630;
  --ink-deep:#091228;
  --ink-2:#13213F;
  --ink-warm:#172848;
  --gold:#60A5FA;
  --gold-2:#22D3EE;
  --gold-deep:#2563EB;
  --gold-dim:#1D4ED8;
  --text:#F4F7FB;
  --muted:#C3CDDC;
  --line:rgba(255,255,255,0.14);
  --line-gold:rgba(96,165,250,0.36);
  --line-gold-strong:rgba(96,165,250,0.75);
  --shadow-cta:0 14px 34px -14px rgba(59,130,246,0.55);
}
body{background:radial-gradient(circle at top,rgba(96,165,250,0.16),transparent 55%),linear-gradient(180deg,#0E1A36 0%,#0C1630 55%,#0A132A 100%) fixed;font-weight:500;}

/* the top bar (round 8, Yossi 11/02: "a small logo, and the hero built another way"): thin and sticky, the official logo
   small on the left (logo/flat_logo.py, a vector traced from the official file), the page's start action on the right */
.top-bar{position:sticky;top:0;z-index:40;padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px;background:rgba(12,22,48,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block-end:1px solid var(--line);}
.top-bar .header-inner{padding:0;border:0;}
.top-bar .brand{min-height:44px;}
.flat-logo{display:block;block-size:32px;inline-size:auto;}
.top-cta{min-block-size:44px;padding:10px 18px;font-size:15px;border-radius:10px;}
.top-cta .wa-icon{inline-size:18px;block-size:18px;}
html{scroll-padding-top:76px;}
@media(max-width:600px){
  .top-bar .header-inner{padding-inline:16px;}
  .flat-logo{block-size:26px;}
  .top-cta{padding:9px 14px;font-size:14px;}
  .top-cta-long{display:none;}
}

/* the opening (round 8): text-led and centred, over Evyatar's network art. The line, one promise from the page's own
   words, and the two ways on: start (WhatsApp) or see how it works (the DNA). No animation of its own. */
.brand-intro{min-block-size:auto;}
.brand-intro .intro-content{block-size:auto;min-block-size:calc(100svh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-block:72px 96px;pointer-events:auto;}
.hero-title{margin:0;font-family:var(--font-display);font-size:clamp(36px,4.6vw,64px);font-weight:700;line-height:1.08;letter-spacing:-.01em;color:var(--text);max-inline-size:16ch;text-wrap:balance;}
.hero-promise{margin:0;max-inline-size:40ch;font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--muted);text-wrap:balance;}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-block-start:6px;}
.hero-ctas .btn-ghost{background:transparent;color:var(--gold-2);border:1px solid var(--line-gold-strong);}
.hero-ctas .btn-ghost:hover{background:rgba(96,165,250,0.08);}
@media(max-width:600px){
  .brand-intro .intro-content{min-block-size:calc(100svh - 58px);gap:20px;padding-block:40px 72px;}
  .hero-title{font-size:36px;}
  .hero-promise{font-size:18px;}
  .hero-ctas{flex-direction:column;align-items:stretch;inline-size:100%;max-inline-size:340px;}
  .hero-ctas .btn-xl{padding-inline:18px;font-size:17px;white-space:nowrap;}
}

.cta-final-inner .cta-book{
  margin-inline-start:12px;
  background:transparent;
  color:var(--gold-2);
  border:1px solid var(--line-gold-strong);
}
.cta-final-inner .cta-book:hover{background:rgba(96,165,250,0.08);}
@media(max-width:640px){
  .cta-final-inner .cta-book{margin-inline-start:0;margin-block-start:12px;}
}

.advisor-scene .advisor circle{stroke:var(--gold);stroke-width:3;}
.advisor-scene .advisor image{stroke:none;}

.dna-get .dna-paid{margin-block-start:16px;color:var(--muted);font-size:var(--size-small);}

/* contrast and polish (round 4) */
.example-image{filter:brightness(1.35) saturate(1.12) contrast(1.04);}
.dna-get .dna-paid{margin-inline-start:0;padding-inline-start:0;}

/* ---------- round 9 (Yossi 11/02: "designed, not boxes: a diagram, an infographic"): every section explains itself in
   one diagram: icon nodes on connecting lines, short labels. One icon set (Lucide line icons, tools/icons.mjs). ---------- */
.dia .section-head p{margin-inline:auto;color:var(--muted);font-size:clamp(17px,1.3vw,19px);}
.ic{inline-size:26px;block-size:26px;flex:none;}
.node{position:relative;display:inline-grid;place-items:center;inline-size:72px;block-size:72px;border-radius:50%;flex:none;color:var(--gold-2);
  background:radial-gradient(circle at 35% 30%,#1B2F57,var(--ink-2) 70%) padding-box,linear-gradient(140deg,var(--gold-2),var(--gold-deep)) border-box;
  border:2px solid transparent;box-shadow:0 0 0 6px rgba(34,211,238,.06),0 10px 30px -12px rgba(34,211,238,.45);}
.node-sm{inline-size:46px;block-size:46px;box-shadow:0 0 0 4px rgba(34,211,238,.05);}
.node-sm .ic{inline-size:20px;block-size:20px;}
.node-lg{inline-size:104px;block-size:104px;}
.node-lg .ic{inline-size:40px;block-size:40px;}
.node b{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 13px/1 var(--font-display);}
.dia h3{font-size:19px;line-height:1.3;margin:0;color:var(--text);}
.dia li p,.dia .hm-you p,.dia .hm-core p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.5;max-inline-size:none;}
.dia-caption{margin:40px auto 0;text-align:center;color:var(--muted);font-size:17px;max-inline-size:44ch;}
/* a vertical line with icon nodes on it */
.spine{position:relative;display:grid;gap:14px;margin:14px 0 0;padding:0;list-style:none;}
.spine::before{content:'';position:absolute;inset-block:23px;inset-inline-start:22px;inline-size:2px;background:linear-gradient(var(--gold-2),var(--gold-deep));opacity:.55;}
.spine li{position:relative;display:flex;align-items:center;gap:14px;color:var(--text);font-size:16px;line-height:1.4;}
.line-h{background:linear-gradient(90deg,var(--gold-2),var(--gold-deep));}

/* How it works: four steps on one line, under the paid-first-step bracket; the last points down to the map */
.flow{position:relative;max-inline-size:1080px;margin-inline:auto;}
.flow-tag{position:relative;margin:0 calc((100% - 72px) / 8) 34px;block-size:18px;border:2px solid rgba(96,165,250,.45);border-block-end:0;border-radius:10px 10px 0 0;text-align:center;}
.flow-tag span{position:relative;inset-block-start:-14px;padding:4px 14px;border-radius:999px;background:var(--ink);border:1px solid var(--line-gold-strong);color:var(--gold-2);font:700 13px/1.4 var(--font-display);letter-spacing:.06em;text-transform:uppercase;}
.flow-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;}
.flow-steps::before{content:'';position:absolute;inset-block-start:35px;inset-inline:calc((100% - 72px) / 8);block-size:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold-deep));transform-origin:left;}
.flow-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.flow-steps li p{max-inline-size:20ch;}
.flow-down{position:absolute;inset-inline-start:calc(100% - (100% - 72px) / 8);inset-block-end:-64px;translate:-50% 0;display:grid;place-items:center;color:var(--gold-2);}
.flow-down::before{content:'';position:absolute;inset-block-end:100%;inline-size:2px;block-size:28px;background:linear-gradient(transparent,var(--gold-2));}
.flow.will-draw .flow-steps::before{transform:scaleX(0);}
.flow.will-draw.is-drawn .flow-steps::before{transform:none;transition:transform 1.2s cubic-bezier(.4,0,.2,1) .15s;}
#dna{padding-block-end:calc(var(--section,96px) + 40px);}

/* the manager: you, Yossi, the team, on one line through him */
.hub-manager{position:relative;display:grid;grid-template-columns:220px auto 240px;justify-content:center;align-items:start;gap:0 88px;margin-inline:auto;padding-block-start:44px;}
.hm-you{margin-block-start:40px;}
.hm-team{position:relative;margin-block-start:-37px;}
.hm-team h3{position:absolute;inset-block-end:100%;inset-inline-start:0;margin-block-end:12px;white-space:nowrap;}
.hm-team .spine{margin:0;}
.hm-you,.hm-core{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
.hm-core{position:relative;}
.core-photo{display:block;inline-size:148px;block-size:148px;border-radius:50%;padding:4px;background:linear-gradient(140deg,var(--gold-2),var(--gold-deep));box-shadow:0 0 0 10px rgba(34,211,238,.07),0 18px 48px -16px rgba(34,211,238,.55);}
.core-photo img{inline-size:100%;block-size:100%;border-radius:50%;object-fit:cover;display:block;}
.core-photo{position:relative;z-index:1;}
.hm-you .node::after,.hm-team .spine::after{content:'';position:absolute;inline-size:220px;block-size:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold-deep));z-index:0;}
.hm-you .node::after{inset-block-start:calc(50% - 1px);inset-inline-start:100%;}
.hm-team .spine::after{inset-block-start:calc(50% - 1px);inset-inline-end:calc(100% - 23px);}
.hm-you,.hm-team{position:relative;}
.hm-you .node{z-index:1;}

/* what we build: the business at the centre, four spokes; an industry lights the ones its examples use */
.hub-build{position:relative;display:grid;grid-template-columns:38% 24% 38%;align-items:center;block-size:320px;max-inline-size:1000px;margin-inline:auto;}
.hb-lines{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;}
.hb-lines path{fill:none;stroke:var(--gold-2);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.6;transition:opacity .3s ease,stroke .3s ease;}
.hb-core{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1;text-align:center;}
.hb-caps{display:contents;margin:0;padding:0;list-style:none;}
.hb-caps li{display:flex;align-items:center;gap:14px;color:var(--text);font:600 17px/1.3 var(--font-display);transition:opacity .3s ease;z-index:1;}
.hb-caps li[data-cap="web"]{grid-column:1;grid-row:1;flex-direction:row-reverse;text-align:end;justify-self:end;}
.hb-caps li[data-cap="auto"]{grid-column:1;grid-row:2;flex-direction:row-reverse;text-align:end;justify-self:end;}
.hb-caps li[data-cap="video"]{grid-column:3;grid-row:1;justify-self:start;}
.hb-caps li[data-cap="connect"]{grid-column:3;grid-row:2;justify-self:start;}
.hub-build{grid-template-rows:1fr 1fr;}
.hub-build .dim{opacity:.28;}
.hb-lines path.dim{opacity:.12;}
.industries{max-inline-size:900px;margin:44px auto 0;text-align:center;}
.industries-label{margin:0 auto 14px;max-inline-size:none;text-align:center;color:var(--muted);font:700 13px/1.4 var(--font-display);letter-spacing:.08em;text-transform:uppercase;}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.chips button{min-block-size:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-gold);background:transparent;color:var(--text);font:600 15px/1.2 var(--font-body);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease;}
.chips button:hover{border-color:var(--gold-2);}
.chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.industry-lines{display:grid;gap:10px;justify-content:center;margin:24px 0 0;padding:0;list-style:none;min-block-size:0;}
.industry-lines li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:17px;text-align:start;}
.industry-lines .ic{inline-size:20px;block-size:20px;color:var(--gold-2);}

/* two ways to work: one map, a fork, three points on each branch */
.fork{max-inline-size:900px;margin-inline:auto;}
.fork-root{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.fork-lines{display:block;inline-size:100%;block-size:96px;overflow:visible;}
.fork-lines path{fill:none;stroke:var(--gold-2);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.7;}
.fork-branches{display:grid;grid-template-columns:1fr 1fr;}
.branch{justify-self:center;inline-size:min(100%,340px);}
.branch h3{text-align:start;padding-block-end:6px;border-block-end:2px solid rgba(96,165,250,.35);}

/* the FAQ's last line: a business that is only starting */
.start-line{display:flex;align-items:center;gap:14px;max-inline-size:860px;margin:32px auto 0;color:var(--muted);font-size:17px;line-height:1.5;}
.start-line strong{color:var(--text);}

/* the floating WhatsApp waits until the opening (which has its own two) is off screen */
.wa-float{transition:opacity .25s ease,transform .25s ease;}
body.hero-on-screen .wa-float{opacity:0;transform:translateY(12px);pointer-events:none;}
@media(max-width:600px){.wa-float{display:none;}}

@media(max-width:860px){
  .flow-tag{margin:0 0 26px;border:0;block-size:auto;}
  .flow-tag span{inset-block-start:0;}
  .flow-steps{grid-template-columns:1fr;gap:26px;max-inline-size:420px;margin-inline:auto;}
  .flow-steps::before{inset-block:36px;inset-inline:35px auto;inline-size:2px;block-size:auto;background:linear-gradient(var(--gold-2),var(--gold-deep));transform-origin:top;}
  .flow.will-draw .flow-steps::before{transform:scaleY(0);}
  .flow-steps li{display:grid;grid-template-columns:72px 1fr;column-gap:18px;align-items:center;text-align:start;}
  .flow-steps li .node{grid-row:1/3;}
  .flow-steps li p{max-inline-size:none;margin:0;}
  .flow-down{inset-inline-start:max(36px,calc(50% - 210px + 36px));}
  .hub-manager{grid-template-columns:1fr;gap:48px;max-inline-size:420px;padding-block-start:0;}
  .hm-you{margin-block-start:0;}
  .hm-team{margin-block-start:0;}
  .hm-team h3{position:static;margin-block-end:12px;}
  .hm-you .node::after,.hm-team .spine::after{display:none;}
  .hm-core::before,.hm-core::after{content:'';position:absolute;inset-inline-start:50%;inline-size:2px;block-size:48px;background:linear-gradient(var(--gold-2),var(--gold-deep));}
  .hm-core::before{inset-block-end:100%;inset-inline-end:auto;}
  .hm-core::after{inset-block-start:100%;}
  .hm-team{justify-self:center;}
  .hm-team h3{margin-inline-start:0;text-align:center;}
  .hub-build{display:block;block-size:auto;max-inline-size:420px;}
  .hb-lines{display:none;}
  .hb-core{margin-block-end:22px;}
  .hb-caps{display:grid;gap:14px;position:relative;padding-inline-start:0;}
  .hb-caps::before{content:'';position:absolute;inset-block:-22px 36px;inset-inline-start:35px;inline-size:2px;background:linear-gradient(var(--gold-2),var(--gold-deep));opacity:.55;}
  .hb-caps li,.hb-caps li[data-cap]{grid-column:auto;grid-row:auto;flex-direction:row;text-align:start;justify-self:stretch;position:relative;}
  .fork-lines{display:none;}
  .fork-root{margin-block-end:28px;}
  .fork-branches{grid-template-columns:1fr;gap:34px;}
  .branch{justify-self:center;}
}
@media(prefers-reduced-motion:reduce){.flow.will-draw .flow-steps::before{transform:none;}}

/* the live map fills its frame (round 9b): the map is round, so the frame is narrower and taller than the section */
#map .map-mini{max-inline-size:640px;margin-inline:auto;}
#map #dna-map{block-size:min(700px,80svh);}
@media(max-width:860px){#map #dna-map{block-size:min(560px,72svh);}}