/* ============================================================
   FLO — AI-Native Delivery · Styles
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-sans); font-weight:400; font-size:var(--fs-body);
  line-height:1.6; color:var(--fg); background:var(--navy);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--cyan); color:var(--navy); }

/* Keyboard focus */
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px; }
.about :focus-visible { outline-color:var(--navy); }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:200; background:var(--cyan); color:var(--navy); padding:.65em 1.1em; border-radius:var(--r-pill); font-family:var(--font-sans); font-weight:500; font-size:.9rem; transition:top .2s var(--ease); }
.skip-link:focus { top:1rem; outline:none; }

/* ---------- Layout primitives ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
section { background:var(--bg); color:var(--fg); position:relative; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-eyebrow); font-weight:500; text-transform:uppercase; letter-spacing:.16em;
  padding:.55em 1.05em; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted);
  background:rgba(255,255,255,.02); backdrop-filter:blur(4px);
}
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 1px var(--cyan); flex:none; animation:pulseDot 2.6s var(--ease) infinite; }
@keyframes pulseDot { 0%,100%{ box-shadow:0 0 8px 1px var(--cyan); opacity:.85; } 50%{ box-shadow:0 0 16px 3px var(--cyan); opacity:1; } }

.section-eyebrow {
  display:block; font-size:var(--fs-small); font-weight:500; text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent); margin-bottom:1.1rem;
}
.section-title {
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-h2);
  line-height:1.1; letter-spacing:-.02em;
}
/* Editorial accent word — navy/white text + brand-cyan underline (on-brand, readable on light) */
.section-title em {
  font-family:var(--font-editorial); font-weight:200; font-style:italic; color:inherit;
  background-image:linear-gradient(var(--cyan), var(--cyan));
  background-size:100% .09em; background-position:0 94%; background-repeat:no-repeat;
  padding-bottom:.04em;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:var(--font-sans); font-weight:500; font-size:.95rem; line-height:1;
  padding:.95em 1.6em; border-radius:var(--r-pill); border:1px solid transparent;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap;
}
.btn .ico { transition:transform var(--dur) var(--ease-out); display:inline-block; }
.btn-primary { background:var(--cyan); color:var(--navy); box-shadow:0 0 0 0 rgba(8,255,163,.5); }
.btn-primary:hover { background:#fff; transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(8,255,163,.7); }
.btn-primary:hover .ico { transform:translate(3px,-3px); }
.btn-primary:hover .ico.down { transform:translateY(4px); }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); }
.btn-ghost:hover .ico { transform:translateX(4px); }
.btn-sm { padding:.7em 1.2em; font-size:.85rem; }

/* ---------- Nav ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:100; padding:1.15rem 0; transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(12,12,26,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:rgba(255,255,255,.10); padding:.7rem 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-links { display:flex; gap:2rem; }
.nav-links a { font-size:.92rem; color:rgba(255,255,255,.66); transition:color var(--dur) var(--ease); position:relative; }
.nav-links a:hover { color:#fff; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--cyan); transition:width var(--dur) var(--ease); }
.nav-links a:hover::after { width:100%; }
.brand { display:inline-flex; align-items:center; }
.brand-logo { height:25px; width:auto; display:block; transition:height var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav.scrolled .brand-logo { height:22px; }
.brand:hover .brand-logo { opacity:.82; }

/* ---------- Hero ---------- */
.hero { min-height:100svh; display:flex; align-items:center; padding:9rem 0 5rem; overflow:hidden; background:#0b0b18; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* stacked layers: photo → dark overlay → green gradient → orbs */
.hl { position:absolute; inset:0; }
.hl-photo { z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.hl-dark  { z-index:1; background:linear-gradient(100deg, rgba(8,9,18,.93) 0%, rgba(8,9,18,.78) 40%, rgba(9,10,20,.62) 74%, rgba(9,10,20,.55) 100%); }
.hl-grad  { z-index:2; mix-blend-mode:screen; animation:drift 24s var(--ease) infinite alternate;
  background:
    radial-gradient(48% 52% at 84% 8%, rgba(0,255,160,.5), transparent 60%),
    radial-gradient(44% 50% at 20% 100%, rgba(96,142,255,.3), transparent 64%),
    radial-gradient(34% 40% at 62% 44%, rgba(176,252,232,.16), transparent 70%); }
@keyframes drift { from { transform:translate3d(-2%,-1%,0) scale(1.02); } to { transform:translate3d(3%,2%,0) scale(1.1); } }

/* Hero green orbs (signature — radial #43FFB9 → #00FFA0, like weareflo.com) */
.orb, .orb-dot { position:absolute; z-index:3; border-radius:50%; translate:var(--px,0) var(--py,0); will-change:transform, translate; }
/* clustered & overlapping into one figure (right of headline) */
/* each orb flies in from off-screen-right (~.85s, staggered) then hands off to its float loop */
.orb-a { width:clamp(300px,32vw,460px); aspect-ratio:1; right:9%; top:13%;
  background:radial-gradient(circle at 50% 50%, rgba(0,255,160,0) 44%, rgba(0,255,160,.46) 68%, rgba(67,255,185,.07) 82%, transparent 92%);
  filter:blur(3px); animation:orbIn .85s var(--ease-out) .02s both, floatA 21s var(--ease) .87s infinite; }
.orb-b { width:clamp(190px,22vw,300px); aspect-ratio:1; right:20%; top:34%;
  background:radial-gradient(circle at 50% 50%, rgba(8,255,163,0) 40%, rgba(8,255,163,.55) 70%, transparent 88%);
  filter:blur(2px); animation:orbIn .85s var(--ease-out) .1s both, floatB 18s var(--ease) .95s infinite; }
.orb-c { width:clamp(120px,13vw,180px); aspect-ratio:1; right:13%; top:44%;
  background:radial-gradient(circle at 44% 40%, #6BFFCB 0%, #00FFA0 56%, rgba(0,255,160,0) 80%);
  filter:blur(.5px); opacity:.95; animation:orbIn .85s var(--ease-out) .17s both, floatC 16s var(--ease) 1.02s infinite; }
.orb-dot { width:10px; height:10px; right:18%; top:25%; background:var(--cyan); box-shadow:0 0 16px 3px rgba(8,255,163,.85); animation:orbIn .85s var(--ease-out) .22s both, floatDot 13s var(--ease) 1.07s infinite; }
@keyframes orbIn { from { transform:translate(62vw,-4vh) scale(.7); } to { transform:translate(0,0) scale(1); } }
@keyframes floatA { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-10px,13px) scale(1.03); } }
@keyframes floatB { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(11px,-9px) scale(1.04); } }
@keyframes floatC { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-8px,-11px) scale(1.05); } }
@keyframes floatDot { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(7px,9px); } }

.hero-inner { position:relative; z-index:5; }
.hero-content { max-width:680px; }
.hero-title {
  font-weight:500; font-size:var(--fs-display); line-height:1.0; letter-spacing:-.035em;
  margin:1.4rem 0 1.6rem; max-width:16ch; text-wrap:balance;
}
.hero-title em { font-family:var(--font-editorial); font-weight:200; font-style:italic; color:var(--cyan); letter-spacing:-.01em; text-shadow:0 0 38px rgba(8,255,163,.45); }
.hero-sub { font-size:var(--fs-lead); line-height:1.55; color:var(--muted); max-width:56ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }

/* ---------- Trust ---------- */
.trust { padding:clamp(2.5rem,5vw,3.75rem) 0 clamp(3.5rem,7vw,5.5rem); border-top:1px solid var(--line); }
.trust-label { text-transform:uppercase; letter-spacing:.18em; font-size:var(--fs-small); color:var(--faint); margin-bottom:2.2rem; }
.logos { display:flex; align-items:center; gap:clamp(1.75rem,4.5vw,3.75rem); flex-wrap:wrap; }
.logos img { width:clamp(96px,12vw,132px); height:auto; opacity:.9; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.logos img:hover { opacity:1; transform:translateY(-2px); }

/* ---------- Why AI-native (qualitative why + quantitative proof; pinned scroll-reel) ---------- */
.why { position:relative; color:var(--navy);
  background:
    radial-gradient(52% 36% at 90% 0%, rgba(8,255,163,.16), transparent 60%),
    radial-gradient(66% 52% at 2% 104%, rgba(67,255,185,.24), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #EFFCF6 32%, #D2F8E7 70%, #B6F5DB 100%); }
.why-track { padding-block:clamp(3rem,6vw,5rem); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.why-para { font-size:1.05rem; line-height:1.6; color:var(--muted); max-width:46ch; margin-top:1.2rem; }
.why-reel { display:flex; flex-direction:column; gap:clamp(2.5rem,6vw,4rem); }
.why-eyebrow { display:inline-flex; align-items:center; gap:.7em; font-size:var(--fs-small); font-weight:500; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin-bottom:1.1rem; }
.why-eyebrow::before { content:''; width:30px; height:2px; background:var(--cyan); flex:none; }
.why-num { display:block; font-weight:500; font-size:clamp(3.8rem,9vw,8rem); line-height:.86; letter-spacing:-.04em; color:var(--navy); font-variant-numeric:tabular-nums; }
.why-mlabel { font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.5; color:var(--muted); margin-top:1.2rem; max-width:34ch; }
.why-src { display:block; margin-top:1rem; font-size:.72rem; letter-spacing:.02em; color:var(--faint); }
/* Enhanced (JS, desktop): pin the section; one big number slides up to the next as you scroll.
   The reel window is the FULL viewport, so numbers rise in from the bottom edge and leave off the
   top edge — they read as coming from behind the next module and exiting behind the previous one,
   with no clip-box edge floating mid-screen. */
.why--reel .why-track { padding-block:0; height:170vh; }
.why--reel .why-inner { position:sticky; top:0; min-height:100svh; display:flex; align-items:center; }
.why--reel .why-grid { width:100%; align-items:center; }
.why--reel .why-stage { position:relative; height:100svh; overflow:hidden; }
.why--reel .why-reel { display:block; gap:0; padding-top:18svh; will-change:transform; }
.why--reel .why-metric { height:64svh; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:880px) {
  .why-grid { grid-template-columns:1fr; gap:clamp(1.5rem,5vw,2.5rem); }
  .why-track { padding-block:clamp(2.75rem,8vw,4rem); }
  .why-para { max-width:60ch; }
  .why-reel { gap:0; }
  .why-metric:not(:first-child) { border-top:1px solid var(--line); padding-top:clamp(2rem,7vw,3rem); margin-top:clamp(2rem,7vw,3rem); }
}

/* ---------- Framework (5 phases) ---------- */
.section-sub { font-size:var(--fs-lead); line-height:1.55; color:var(--muted); max-width:58ch; margin-top:1.1rem; }

.framework { padding:var(--space-sec) 0; position:relative; overflow:hidden;
  background:
    radial-gradient(58% 62% at 82% 16%, rgba(8,255,163,.95), rgba(8,255,163,0) 58%),
    radial-gradient(54% 58% at 10% 90%, rgba(67,255,185,.88), rgba(67,255,185,0) 60%),
    radial-gradient(48% 54% at 44% 40%, rgba(200,255,239,.95), rgba(200,255,239,0) 68%),
    radial-gradient(50% 55% at 98% 98%, rgba(150,160,168,.5), transparent 62%),
    radial-gradient(42% 46% at 2% 6%, rgba(150,160,168,.42), transparent 60%),
    linear-gradient(135deg, #c7e2da 0%, #e6f7ef 48%, #eafbf4 100%); }
.framework::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); }
.framework > .container { position:relative; z-index:1; }
.fw-head { max-width:60ch; margin-bottom:clamp(2.75rem,5vw,4.25rem); }

.phases { border-top:1px solid rgba(20,20,43,.16); }
.phase { border-bottom:1px solid rgba(20,20,43,.16); }
.phase-head { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem;
  padding:1.6rem .35rem; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; color:inherit;
  transition:padding-left .4s var(--ease); }
.phase-head:hover { padding-left:1.1rem; }
.phase-num { font-size:.82rem; font-weight:500; color:var(--navy); opacity:.45; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.phase.is-open .phase-num { opacity:1; }
.phase-name { font-size:clamp(1.2rem,2vw,1.65rem); font-weight:500; color:var(--navy); letter-spacing:-.01em; }
.phase-chevron { width:10px; height:10px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform .4s var(--ease); margin-right:.4rem; }
.phase.is-open .phase-chevron { transform:rotate(-135deg); border-color:var(--navy); }

.phase-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.phase.is-open .phase-body { grid-template-rows:1fr; }
.phase-body-inner { overflow:hidden; min-height:0; }
/* open columns — no boxes; split by a hairline, distinguished by a centered gradient tint */
.phase-grid { display:grid; grid-template-columns:1fr 1fr; padding:0 0 1.9rem; }
.col { padding:1.9rem clamp(1.5rem,3vw,2.5rem); position:relative; }
.col-human { border-left:1px solid rgba(20,20,43,.22); }
.col-label { display:block; font-size:var(--fs-small); font-weight:500; text-transform:uppercase; letter-spacing:.13em; color:var(--navy); margin-bottom:.95rem; }
.col p { font-size:1rem; line-height:1.62; color:rgba(20,20,43,.76); margin:0; }
.roles { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.role-pill { position:relative; display:inline-flex; align-items:center; font-size:.76rem; font-weight:500; letter-spacing:.02em;
  padding:.5em .55em .5em 1em; border-radius:var(--r-pill); background:var(--navy); color:#fff; cursor:help; }
.role-pill::after { content:'i'; display:inline-flex; align-items:center; justify-content:center; width:1.35em; height:1.35em; margin-left:.55em; border-radius:50%; background:rgba(255,255,255,.2); font-family:var(--font-editorial); font-style:italic; font-size:.92em; }
.role-tip { position:absolute; left:0; bottom:calc(100% + 10px); width:min(280px,78vw); background:var(--navy); color:#fff; font-size:.8rem; font-weight:400; letter-spacing:0; line-height:1.45; padding:.85em 1.05em; border-radius:12px; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s var(--ease), transform .25s var(--ease); box-shadow:0 18px 42px -14px rgba(20,20,43,.55); z-index:6; }
.role-tip::after { content:''; position:absolute; left:22px; top:100%; border:6px solid transparent; border-top-color:var(--navy); }
.role-pill:hover .role-tip, .role-pill:focus-visible .role-tip { opacity:1; transform:translateY(0); }

@media (max-width:680px) {
  .phase-grid { grid-template-columns:1fr; }
  .col-human { border-left:0; border-top:1px solid rgba(20,20,43,.22); }
}

/* ---------- Security architecture (dark, boundary gate) ---------- */
.security { padding:var(--space-sec) 0; position:relative; overflow:hidden; background:#080912; }
.sec-photo { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.5; }
.sec-photo::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 95% at 50% 45%, rgba(8,9,18,.62), rgba(8,9,18,.95)); }
.security > .container { position:relative; z-index:1; }
.sec-head { max-width:64ch; margin-bottom:clamp(3rem,6vw,5rem); }

.sec-boundary { position:relative; max-width:1060px; margin-inline:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(.85rem,2.6vw,2rem); }
.zone, .gate { position:relative; z-index:1; }
.zone-tag { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--gray); margin-bottom:.55rem; }
.zone h4 { font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:500; letter-spacing:-.02em; margin-bottom:1.15rem; line-height:1.1; }
.zone-a h4 { color:var(--cyan); }
.zone-b h4 { color:#fff; }
.zone-lines { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin:0; padding:0; }
.zone-lines li { font-size:1rem; color:rgba(255,255,255,.72); line-height:1.35; }
.zone-a { text-align:right; }
.zone-b { text-align:left; }
.zone-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.zone-a .zone-pills { justify-content:flex-end; }
.zone-b .zone-pills { justify-content:flex-start; }
.z-pill { font-size:.73rem; font-weight:500; padding:.5em .95em; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.8); background:rgba(255,255,255,.04); white-space:nowrap; }
.zone-a .z-pill { border-color:rgba(8,255,163,.32); color:var(--cyan); background:rgba(8,255,163,.06); }
.z-pill.deny { border-color:rgba(255,255,255,.32); color:#fff; }

.gate { position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(94px,11vw,138px); height:clamp(290px,42vh,430px); border-radius:var(--r-pill);
  background:radial-gradient(120% 75% at 50% 26%, #8BFFD4, #00FFA0 52%, rgba(8,255,163,.14) 100%);
  box-shadow:0 0 70px rgba(8,255,163,.4), inset 0 0 46px rgba(255,255,255,.18); }
.gate span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:.8rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#053524; }
@media (max-width:820px) {
  .sec-boundary { grid-template-columns:1fr; gap:1.25rem; }
  .zone-a, .zone-b { text-align:left; }
  .zone-a .zone-pills, .zone-b .zone-pills { justify-content:flex-start; }
  .gate { width:100%; height:60px; }
  .gate span { writing-mode:horizontal-tb; transform:none; }
}

/* slide-in reveals */
.reveal-l, .reveal-r { opacity:0; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change:opacity, transform; }
.reveal-l { transform:translateX(-44px); }
.reveal-r { transform:translateX(44px); }
.reveal-l.in, .reveal-r.in { opacity:1; transform:none; }

/* ---------- Salesforce platform (light, Salesforce-blue accents) ---------- */
.platform { --sf:#0D9DDA; padding:var(--space-sec) 0; position:relative; overflow:hidden;
  background:
    radial-gradient(52% 46% at 86% 8%, rgba(8,255,163,.18), transparent 60%),
    radial-gradient(56% 52% at 6% 104%, rgba(67,255,185,.14), transparent 64%),
    radial-gradient(40% 42% at 50% 50%, rgba(176,252,232,.12), transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%, #ECFBF4 100%); }
.pf-head { max-width:64ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.platform .section-title em { background-image:linear-gradient(var(--cyan),var(--cyan)); }
.pf-intro { font-size:1.05rem; line-height:1.64; color:var(--muted); margin-top:1.2rem; }
.pf-intro strong { color:var(--navy); font-weight:500; }
.pf-chars { position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:clamp(3rem,6vw,4.5rem); }
.pf-chars::before { content:''; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:min(960px,100%); height:340px; background:radial-gradient(closest-side, rgba(8,255,163,.16), transparent 72%); z-index:0; }
.pf-chars-img { position:relative; z-index:1; width:min(840px,100%); height:auto; }
.pf-chars-cap { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.55em; font-size:.76rem; color:var(--sf); text-transform:uppercase; letter-spacing:.14em; }
.pf-chars-cap img { height:22px; width:auto; }
.pf-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.75rem); }
.pf-pillar { padding-top:1.4rem; border-top:1px solid var(--line); position:relative; }
.pf-pillar::before { content:''; position:absolute; top:-1px; left:0; width:46px; height:2px; background:var(--cyan); }
.pf-ico { display:flex; align-items:center; justify-content:flex-start; width:30px; height:30px; margin-bottom:1.1rem; }
.pf-ico svg { width:27px; height:27px; stroke:var(--navy); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pf-pillar p { font-size:.97rem; line-height:1.55; color:var(--muted); margin:0; }
@media (max-width:860px) { .pf-pillars { grid-template-columns:1fr 1fr; gap:2.25rem; } }
@media (max-width:520px) { .pf-pillars { grid-template-columns:1fr; } }

/* ---------- Principles (light, bubbles + hover) ---------- */
.principles { padding:var(--space-sec) 0; position:relative; overflow:hidden;
  background:
    radial-gradient(55% 48% at 10% 16%, rgba(162,167,170,.26), transparent 62%),
    radial-gradient(50% 52% at 90% 26%, rgba(8,255,163,.2), transparent 60%),
    radial-gradient(62% 58% at 52% 112%, rgba(67,255,185,.24), transparent 66%),
    radial-gradient(40% 44% at 78% 88%, rgba(162,167,170,.2), transparent 64%),
    linear-gradient(170deg, #ECF2F0 0%, #F3FAF7 48%, #E7F5EF 100%); }
.pr-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pr-orbs span { position:absolute; border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(107,255,203,.5), rgba(0,255,160,.1) 60%, transparent 80%); }
.pr-orbs span:nth-child(1){ width:130px; height:130px; left:-30px; top:34%; }
.pr-orbs span:nth-child(2){ width:78px; height:78px; left:7%; top:66%; }
.pr-orbs span:nth-child(3){ width:160px; height:160px; right:-44px; top:6%; }
.pr-orbs span:nth-child(4){ width:58px; height:58px; right:13%; bottom:9%; }
.principles > .container { position:relative; z-index:1; }
.pr-head { max-width:60ch; margin-bottom:clamp(2.75rem,5vw,4rem); }
.pr-bubbles { display:flex; flex-direction:column; align-items:center; gap:clamp(.5rem,1.5vw,1.25rem); }
.pr-row { display:flex; justify-content:center; align-items:flex-start; gap:clamp(1rem,2.6vw,2.5rem); flex-wrap:wrap; }
.bubble { position:relative; flex:0 0 auto; width:clamp(178px,20vw,244px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #BFFFE6, #43FFB9 46%, #00E591 100%);
  box-shadow:0 22px 50px -18px rgba(0,213,137,.55); cursor:pointer; opacity:0;
  transition:box-shadow .4s var(--ease); }
.bubble.in { animation:bubblePop .62s var(--ease-out) both; animation-delay:calc(var(--i,0)*110ms); }
@keyframes bubblePop { 0%{ opacity:0; transform:scale(.3) translateY(26px); } 55%{ opacity:1; } 72%{ transform:scale(1.06) translateY(0); } 100%{ opacity:1; transform:scale(1); } }
.bubble:hover { box-shadow:0 30px 66px -14px rgba(0,213,137,.72); }
/* each bubble a different size + height → organic objects, not a grid */
.pr-row-2 { margin-top:clamp(-3rem,-3vw,-1.25rem); }
.pr-row-1 .bubble:nth-child(1){ width:clamp(202px,23vw,268px); margin-top:6px; }
.pr-row-1 .bubble:nth-child(2){ width:clamp(162px,18vw,202px); margin-top:62px; }
.pr-row-1 .bubble:nth-child(3){ width:clamp(184px,20vw,232px); margin-top:20px; }
.pr-row-2 .bubble:nth-child(1){ width:clamp(192px,21vw,250px); margin-top:0; }
.pr-row-2 .bubble:nth-child(2){ width:clamp(168px,19vw,214px); margin-top:-14px; }
.bubble-face { position:absolute; inset:15%; display:flex; align-items:center; justify-content:center; text-align:center; transition:opacity .35s var(--ease); }
.bubble-title { font-size:clamp(1.02rem,1.45vw,1.28rem); font-weight:500; color:#0a2c1f; line-height:1.2; letter-spacing:-.01em; }
.bubble-desc { font-size:.85rem; line-height:1.42; color:#0a3a28; opacity:0; }
.bubble:hover .bubble-title, .bubble.show-desc .bubble-title { opacity:0; }
.bubble:hover .bubble-desc, .bubble.show-desc .bubble-desc { opacity:1; }
@media (max-width:680px) {
  .pr-row { flex-direction:column; align-items:center; gap:1rem; }
  .pr-row-2 { margin-top:1rem; }
  .pr-bubbles .bubble { width:min(62vw,214px) !important; margin-top:0 !important; }
}

/* ---------- About FLO (bright-green statement) ---------- */
.about { padding:var(--space-sec) 0; position:relative; overflow:hidden; color:var(--navy);
  background:linear-gradient(140deg, #08FFA3 0%, #2BFFB0 48%, #62FFC8 100%); }
.about-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.about-orbs span { position:absolute; border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 70%); }
.about-orbs span:nth-child(1){ width:360px; height:360px; right:-70px; top:-90px; }
.about-orbs span:nth-child(2){ width:220px; height:220px; left:6%; bottom:-70px; opacity:.6; }
.about-logo { position:absolute; top:-25%; right:6%; height:150%; width:132px; z-index:0; pointer-events:none; will-change:transform;
  background-image:url('../assets/img/flo-navy-rot.png'); background-repeat:repeat-y; background-position:center top; background-size:auto 460px; opacity:1; }
@media (max-width:900px) { .about-logo { display:none; } }
.about > .container { position:relative; z-index:1; }
.about .section-eyebrow { color:rgba(20,20,43,.55); }
.about-title { font-family:var(--font-sans); font-weight:500; font-size:clamp(2.1rem,4.8vw,4rem); line-height:1.05; letter-spacing:-.03em; color:var(--navy); max-width:20ch; margin-top:.5rem; text-wrap:balance; }
.about-title em { font-family:var(--font-editorial); font-weight:200; font-style:italic; }
.about-para { font-size:clamp(1.05rem,1.55vw,1.3rem); line-height:1.55; color:rgba(20,20,43,.78); max-width:54ch; margin:clamp(1.5rem,3vw,2.25rem) 0 clamp(2.25rem,4.5vw,3.25rem); }
.about-para em { font-family:var(--font-sans); font-style:normal; font-weight:500; color:var(--navy); }
.about-para strong { font-weight:500; color:var(--navy); }
.about-practices { display:flex; flex-wrap:wrap; gap:.75rem; }
.apr { position:relative; display:inline-flex; align-items:center; gap:.55em; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:500; padding:.7em 1.35em; border-radius:var(--r-pill); border:1.5px solid var(--navy); color:var(--navy); cursor:pointer; text-decoration:none; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.apr > span:first-child { font-size:.72em; opacity:.55; }
.apr.is-cx { background:var(--navy); color:#fff; border-color:var(--navy); }
.apr.is-cx > span:first-child { color:var(--cyan); opacity:1; }
.apr:hover { transform:translateY(-4px); }
.apr-tip { position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(8px); width:240px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:400; line-height:1.45; padding:.85em 1.05em; border-radius:14px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); box-shadow:0 18px 40px -14px rgba(0,40,25,.5); z-index:5; }
.apr-tip::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy); }
.apr:hover .apr-tip, .apr:focus-visible .apr-tip { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:680px){ .about-practices { flex-direction:column; align-items:flex-start; } .apr-tip { left:0; transform:translateX(0) translateY(8px); width:min(80vw,260px); } .apr:hover .apr-tip { transform:translateX(0); } .apr-tip::after { left:24px; } }

/* ---------- CTA finale (dark, interactive routing) ---------- */
.cta { padding:var(--space-sec) 0; position:relative; overflow:hidden; background:#0b0b18; }
.cta-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta-bg::before { content:''; position:absolute; inset:-25%; background:radial-gradient(38% 50% at 82% 8%, rgba(8,255,163,.32), transparent 60%), radial-gradient(46% 56% at 14% 102%, rgba(96,142,255,.22), transparent 64%); filter:blur(52px); animation:drift 24s var(--ease) infinite alternate; }
.cta > .container { position:relative; z-index:1; }
.cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cta-copy .section-eyebrow { color:var(--cyan); }
.cta-sub { font-size:var(--fs-lead); line-height:1.5; color:rgba(255,255,255,.66); max-width:46ch; margin-top:1.1rem; }
.cta-step { margin-top:1.6rem; }
.cta-step:first-child { margin-top:0; }
.cta-step-label { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5); margin-bottom:.85rem; }
.cta-opts { display:flex; flex-wrap:wrap; gap:.6rem; }
.cta-opt { font-family:inherit; font-size:.92rem; font-weight:500; color:rgba(255,255,255,.82); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); padding:.7em 1.2em; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cta-opt:hover { border-color:rgba(8,255,163,.5); color:#fff; }
.cta-opt.active { background:var(--cyan); color:var(--navy); border-color:var(--cyan); }
.cta-figures { display:flex; align-items:flex-end; justify-content:center; gap:0; position:relative; z-index:0; margin-bottom:-2px; }
.cta-figures::before { content:''; position:absolute; inset:26% 0 0 0; background:radial-gradient(74% 84% at 50% 92%, rgba(176,252,232,.26), rgba(8,255,163,.11) 46%, transparent 72%); filter:blur(12px); z-index:0; pointer-events:none; }
/* Two cut-outs (Marian, Viktor): wider than the old three-up so the pair still fills the column. Marian sits in front, he is the lead contact. */
.cta-fig { position:relative; width:60%; height:auto; cursor:pointer; transform:translateX(var(--fx,0)); transition:filter .45s var(--ease), transform .45s var(--ease); }
.cta-fig:nth-child(1) { z-index:2; }
.cta-fig:nth-child(2) { z-index:1; }
.cta-fig + .cta-fig { margin-left:-22%; }
.cta-fig.is-dim { filter:grayscale(1) opacity(.42); }
.cta-fig.is-dim:hover { filter:grayscale(.15) opacity(.85); }
.cta-fig.is-active { transform:translateX(var(--fx,0)) translateY(-8px); z-index:4; }
.cta-fig:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.cta-card { position:relative; z-index:1; margin-top:-8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); backdrop-filter:blur(10px); padding:clamp(1.75rem,3vw,2.25rem); }
.cta-outcome { margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); }
.cta-person { margin-bottom:1.1rem; }
.cta-name { font-size:1.15rem; font-weight:500; color:#fff; }
.cta-role { font-size:.9rem; color:rgba(255,255,255,.6); margin-top:.15rem; }
.cta-btn { width:100%; justify-content:center; pointer-events:none; opacity:.45; }
.cta-btn.ready { pointer-events:auto; opacity:1; }
.cta-note { font-size:.84rem; color:rgba(255,255,255,.5); margin-top:1rem; text-align:left; }
.cta-note a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.cta-email[hidden] { display:none; }
.cta-email { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; margin-top:.85rem; padding:.7rem 1.1rem; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); background:rgba(255,255,255,.04); cursor:pointer; text-align:left; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cta-email:hover { border-color:rgba(8,255,163,.5); background:rgba(255,255,255,.07); }
.cta-email:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.cta-email-addr { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; font-size:.92rem; color:#fff; -webkit-user-select:text; user-select:text; }
.cta-email-hint { flex:none; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap; transition:color var(--dur) var(--ease); }
.cta-email.copied { border-color:rgba(8,255,163,.6); background:rgba(8,255,163,.07); }
.cta-email.copied .cta-email-hint { color:var(--cyan); }
@media (max-width:820px){ .cta-grid { grid-template-columns:1fr; } }

/* ---------- Footer (dark) ---------- */
.footer { background:#08080F; color:rgba(255,255,255,.6); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
.footer-brand-link { display:block; width:max-content; max-width:100%; margin-bottom:1.1rem; transition:opacity var(--dur) var(--ease); }
.footer-brand-link:hover { opacity:.82; }
.footer-brand .brand-logo { height:26px; width:auto; }
.footer-tag { font-family:var(--font-editorial); font-style:italic; font-weight:200; font-size:1.2rem; color:rgba(255,255,255,.8); max-width:22ch; }
.footer-col h5 { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin:0 0 .9rem; }
.footer-col a, .footer-col p { font-size:.92rem; color:rgba(255,255,255,.62); display:block; margin:0 0 .5rem; text-decoration:none; line-height:1.5; }
.footer-col a:hover { color:var(--cyan); }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:rgba(255,255,255,.4); }
@media (max-width:820px){ .footer-top { grid-template-columns:1fr 1fr; gap:2rem 2.5rem; } }
@media (max-width:480px){ .footer-top { grid-template-columns:1fr; gap:2rem; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay:calc(var(--i, 0) * 90ms); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .nav-links { display:none; }
  .hero-content { max-width:100%; }
  .hero-title { max-width:18ch; }
  .orb-a { right:-12%; top:auto; bottom:4%; opacity:.7; }
  .orb-b { right:-4%; top:62%; opacity:.6; }
  .orb-c { right:6%; top:14%; opacity:.7; }
  .orb-dot { right:14%; top:9%; }
}
@media (max-width:560px) {
  .hero { padding:7.5rem 0 5rem; min-height:auto; }
  .hero-actions .btn { flex:1 1 auto; justify-content:center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .reveal-l, .reveal-r, .bubble { opacity:1 !important; transform:none !important; }
}

/* Typography: prevent line orphans/widows.
   text-wrap:balance evens headline line lengths so no single word is stranded
   on its own line; text-wrap:pretty stops orphans on the last line of running
   text. Both are silently ignored by browsers that don't support them.
   (The kinetic hero <h1 class="kinetic"> is intentionally excluded.) */
h2, h3, h4,
.cs-title, .csm-title, .bubble-title, .svc-name, .lvl-name, .ws-name { text-wrap: balance; }
p, li, blockquote, figcaption,
.section-sub, .hero-sub, .cta-sub, .lead-em, .pf-intro { text-wrap: pretty; }