:root{--noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

:root {
  color-scheme: dark;
  --kelp-0: #04191a; --kelp-1: #06231f; --kelp-2: #0a3d37; --kelp-3: #0f4f47;
  --teal: #00827c; --teal-soft: #1f9a92; --mint: #cbfffc; --lav: #fad1ff; --paper: #FAFAF7; --ink: #0E2A28;
  --text: #f2f7f5; --dim: rgba(242, 247, 245, .66); --faint: rgba(242, 247, 245, .42);
  --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .16);
  --rim: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .03) 68%, rgba(203, 255, 252, .28));
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06) inset;
  --r: 20px; --gutter: clamp(18px, 4vw, 40px); --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--kelp-1); color: var(--text); font: 400 16px/1.5 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 450; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* The world: a deep green field with two slow orbs and a grain, everything floats on it. */
.world { position: relative; isolation: isolate; min-height: 100%; overflow-x: clip; }
.world::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -6%, rgba(0, 130, 124, .55), transparent 62%),
    radial-gradient(820px 620px at 96% 18%, rgba(31, 154, 146, .28), transparent 60%),
    radial-gradient(1200px 800px at 50% 115%, rgba(203, 255, 252, .14), transparent 60%),
    linear-gradient(180deg, #0b3f38 0%, #06231f 45%, #04191a 100%);
}
.world::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.orb.a { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: radial-gradient(circle, rgba(203, 255, 252, .32), rgba(0, 130, 124, .18) 45%, transparent 70%); animation: drift 34s ease-in-out infinite alternate; }
.orb.b { width: 38vw; height: 38vw; right: -10vw; top: 30vh; background: radial-gradient(circle, rgba(0, 130, 124, .4), transparent 65%); animation: drift 41s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 8vh, 0) scale(1.12); } }

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); font-weight: 500; }
.eyebrow::before { content: ''; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='13' height='13' rx='3' fill='%2300827c'/%3E%3Crect x='17' width='13' height='13' rx='3' fill='%23cbfffc'/%3E%3Crect y='17' width='13' height='13' rx='3' fill='%23cbfffc'/%3E%3Crect x='17' y='17' width='13' height='13' rx='3' fill='%23fde9ff'/%3E%3C/svg%3E") center / contain no-repeat; }


/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease; }
.btn.primary { background: linear-gradient(120deg, #cbfffc, #e9fffd 55%, #fde9ff); color: var(--kelp-1); box-shadow: 0 12px 30px -14px rgba(203, 255, 252, .7), inset 0 1px 0 #fff; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(203, 255, 252, .8), inset 0 1px 0 #fff; }
.btn.ghost { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.ghost:hover { background: rgba(255, 255, 255, .11); transform: translateY(-2px); }
.btn svg { width: 15px; height: 15px; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; padding: 14px var(--gutter) 0; }
.nav .bar { max-width: 1280px; margin: 0 auto; height: 60px; padding: 0 10px 0 18px; display: flex; align-items: center; gap: 28px; border-radius: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.brand svg { width: 22px; height: 22px; }
.links { display: flex; gap: 28px; margin: 0 auto; font-size: 12.5px; letter-spacing: .06em; color: var(--dim); }
.links a:hover { color: #fff; }
.nav .right { display: flex; align-items: center; gap: 8px; }
.nav .signin { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 0 12px; color: var(--dim); }
.nav .signin:hover { color: #fff; }
.nav .btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nav .menu { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; font-size: 18px; }

/* Hero */
.hero { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(42px, 6.2vw, 84px); }
.hero h1 span { display: block; color: var(--mint); }
.hero .lede { margin-top: 24px; max-width: 34ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--dim); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.note { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--faint); }

/* The plan as pills: dark glass pills the length of their days, one lit teal — the one that decides the date. */
.plan-glass { padding: 22px 22px 18px; }
.plan-glass .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--dim); }
.plan-glass .top b { color: #fff; font-weight: 500; }
.plan-glass .seg { display: inline-flex; background: rgba(0, 0, 0, .25); border-radius: 9px; padding: 3px; gap: 2px; border: 1px solid rgba(255, 255, 255, .08); }
.plan-glass .seg button { padding: 6px 10px; border: 0; background: transparent; border-radius: 7px; font-size: 11.5px; font-weight: 500; color: var(--dim); transition: background .3s, color .3s; }
.plan-glass .seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: var(--kelp-1); }
.plan-glass .seg button:hover { color: #fff; }
.plan-glass .seg button[aria-pressed="true"]:hover { color: var(--kelp-1); }
.field { position: relative; margin-top: 18px; height: 296px; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.field-in { position: relative; height: 100%; }
.field .grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(100% / 12)); }
.field .today { position: absolute; top: 0; bottom: 0; left: 34%; width: 1px; background: linear-gradient(180deg, transparent, var(--mint) 12%, var(--mint) 88%, transparent); box-shadow: 0 0 14px rgba(203, 255, 252, .6); }
.field .today i { position: absolute; top: 12px; left: 8px; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.pill { position: absolute; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px -14px rgba(0, 0, 0, .8);
  font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; min-width: 0; animation: pin .7s var(--ease) both; }
.pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill, .pill > span, .pill em, .mile, .field .today { transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), border-radius .7s var(--ease), opacity .35s ease; }
.field.sq .pill { border-radius: 11px; }
.field.sq .pill > span, .field.sq .pill em, .field.sq .mile, .field.sq .today, .field.sq .grid { opacity: 0; }
.field .grid { transition: opacity .35s ease; }
.field-note { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 12px; color: var(--dim); opacity: 0; transition: opacity .35s ease .3s; pointer-events: none; }
.field.sq .field-note { opacity: 1; }
.fcard { cursor: pointer; }
.fcard:focus-visible { outline: 2px solid #cbfffc; outline-offset: 4px; }
.pill em { font-style: normal; flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 4px 7px; border-radius: 7px; background: var(--kelp-0); color: #fff; }
.pill { background: transparent; border: 1px solid rgba(255, 255, 255, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.pill em { background: rgba(4, 25, 26, .85); }
.pill.done { background: #cbfffc; color: var(--kelp-1); border-color: transparent; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(0, 0, 0, .8); }
.pill.done em { background: var(--kelp-1); color: #fff; }
.pill.crit { background: #fad1ff; color: var(--kelp-1); border-color: transparent; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(0, 0, 0, .8); }
.pill.crit em { background: var(--kelp-1); color: #fff; }
.pill.late { background: #B5463F; color: #fff; border-color: transparent; }
.mile { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.mile b { width: 11px; height: 11px; background: var(--lav); transform: rotate(45deg); border-radius: 2px; }
@keyframes pin { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.plan-glass .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11px; color: var(--dim); }
.plan-glass .legend span { display: inline-flex; align-items: center; gap: 6px; }
.plan-glass .legend i { width: 9px; height: 9px; border-radius: 2px; }

/* Sections */
section { padding: clamp(56px, 8vw, 110px) 0; }
.head { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.head h2 { font-size: clamp(32px, 4.4vw, 56px); }
.head p { color: var(--dim); font-size: 17px; line-height: 1.55; }

/* Squares: the copy and the live card that morphs squares ⇄ gantt */
.squares .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.squares h2 { font-size: clamp(34px, 4.6vw, 60px); margin-top: 16px; }
.squares .copy p { margin-top: 18px; color: var(--dim); font-size: 17px; line-height: 1.55; max-width: 44ch; }
.squares .copy .small { font-size: 13px; color: var(--faint); }
.card-frame { padding: 10px; border-radius: 24px; }
.card-frame::after { content: ''; position: absolute; inset: 20% 10% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 130, 124, .55), transparent); filter: blur(40px); }
kurdinator-plan-card { display: block; }

/* Footer */
footer { padding: clamp(56px, 7vw, 96px) 0 0; }
footer .cols { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 24px; }
footer .big { font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.1; font-weight: 450; max-width: 16ch; }
footer .cols .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); font-weight: 500; margin-bottom: 12px; }
footer .cols a { display: block; font-size: 14px; color: var(--dim); padding: 4px 0; }
footer .cols a:hover { color: #fff; }
footer .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding: 20px 0 8px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: var(--faint); }
footer .word { font-size: clamp(64px, 17vw, 260px); line-height: .8; font-weight: 500; letter-spacing: -.06em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(203, 255, 252, .18); margin-top: 20px; user-select: none; overflow: hidden; }

@media (max-width: 980px) {
  .hero .wrap, .squares .wrap, .faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .squares .wrap > .copy { order: 0; } .squares .wrap > .card-frame { order: 1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product .story { grid-template-columns: minmax(0, 1fr); }
  .engine .panel { grid-template-columns: minmax(0, 1fr); }
  .engine .side { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .links, .nav .signin { display: none; }
  .nav .menu { display: grid; place-items: center; }
  .nav .bar { gap: 10px; padding: 0 8px 0 14px; }
  .nav .right { margin-left: auto; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(40px, 11vw, 60px); }
  .field { height: 250px; }
  .pill { height: 36px; font-size: 12px; padding-left: 10px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .engine .opts { grid-template-columns: minmax(0, 1fr); }
  .engine .out .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { transform: none; }
  .phone { display: none; }
  footer .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .pill { animation: none !important; }
  .glass.lift, .btn, .sheet { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn.ghost, .chip, .row { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0b302b; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(9, 44, 40, .92); }
}

/* ---------- glass primitive ---------- */
.glass{
  position:relative;border-radius:var(--r,20px);
  background:var(--noise),var(--fill,linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04)));
  -webkit-backdrop-filter:blur(var(--blur,18px)) saturate(150%);
  backdrop-filter:blur(var(--blur,18px)) saturate(150%);
  box-shadow:var(--shadow,inset 0 1px 0 rgba(255,255,255,.2),0 24px 60px -24px rgba(0,0,0,.6));
}
/* gradient hairline: bright top-left, fading, catching light again bottom-right */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--edge,linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 35%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.25)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* specular sheen that follows the pointer */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,var(--sheen,.13)),transparent 65%);
  opacity:0;transition:opacity .4s;
}
.glass:hover::after{opacity:1}


/* =========================================================
   02 · FROSTED FOLDERS
   ========================================================= */
.s2{height:calc(640px * var(--k2,1));background:radial-gradient(60% 65% at 60% 45%,#0a2e2a,#04191a 72%)}
.s2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.4px);background-size:22px 22px}
.s2-stage{position:absolute;left:50%;top:0;width:1100px;height:640px;transform-origin:50% 0;
  transform:translateX(calc(-50% + var(--dx2,0px))) scale(var(--k2,1))}
.s2-view{position:absolute;inset:0;perspective:1500px;perspective-origin:62% 6%}
.shelf{position:absolute;left:650px;top:370px;transform-style:preserve-3d;transform:rotateZ(-9deg) rotateX(12deg) rotateY(50deg)}
.folder{position:absolute;left:-120px;top:-150px;width:240px;height:300px;transform-style:preserve-3d;cursor:pointer;outline:none;
  transform:translateZ(var(--z)) translateY(var(--lift,0px));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.folder:hover,.folder:focus-visible{--lift:-28px}
.f-back{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f-back path{fill:url(#fb);stroke:rgba(255,255,255,.55);stroke-width:1;transition:fill .4s}
.folder.on .f-back path{fill:url(#fbOn);stroke:rgba(203,255,252,.7)}
.paper{position:absolute;border-radius:12px;overflow:hidden;
  background:
    repeating-linear-gradient(180deg,transparent 0 12px,rgba(0,0,0,.13) 12px 20px) 18px 18px/44% 120px no-repeat,
    repeating-linear-gradient(180deg,transparent 0 12px,rgba(0,0,0,.08) 12px 20px) 62% 18px/28% 120px no-repeat,
    linear-gradient(180deg,#f4f4f4,#d9d9d9);
  box-shadow:inset 0 1px 0 #fff,0 -2px 10px rgba(0,0,0,.12)}
.paper.p1{left:16px;right:34px;top:36px;height:170px;transform:translateZ(5px)}
.paper.p2{left:34px;right:14px;top:52px;height:160px;transform:translateZ(9px)}
.paper::after{content:"";position:absolute;inset:0;background:rgba(0,130,124,.6);opacity:0;transition:opacity .4s}
.folder.on .paper::after{opacity:1}
.f-front{position:absolute;left:0;right:0;bottom:0;top:84px;border-radius:18px;transform:translateZ(14px);padding:18px 20px 20px;
  display:flex;flex-direction:column;justify-content:space-between;color:#0E2A28;
  background:linear-gradient(175deg,rgba(255,255,255,.82),rgba(226,226,226,.6) 50%,rgba(150,150,150,.42));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35),0 24px 40px -24px rgba(0,0,0,.7);
  transition:background .4s,color .4s,box-shadow .4s}
.folder.on .f-front{color:#fff;
  background:linear-gradient(175deg,rgba(203,255,252,.94),rgba(31,154,146,.92) 42%,rgba(0,90,86,.95));
  box-shadow:inset 0 1px 0 rgba(220,255,253,.95),inset 0 0 0 1px rgba(203,255,252,.35),0 0 80px -8px rgba(0,130,124,.7)}
.folder:focus-visible .f-front{outline:2px solid #cbfffc;outline-offset:3px}
.f-count{display:flex;align-items:center;gap:6px;font:500 22px/1 'DM Sans',ui-sans-serif,sans-serif}
.f-count svg{width:22px;height:22px;fill:currentColor}
.f-name{font:500 22px/1.1 'DM Sans',ui-sans-serif,sans-serif;letter-spacing:-.01em;white-space:nowrap}

.fcard{--r:38px;--blur:16px;--sheen:.55;position:absolute;left:96px;top:88px;width:400px;height:270px;padding:32px 36px;overflow:hidden;z-index:5;
  color:#1c1c1c;font-family:'DM Sans',ui-sans-serif,sans-serif;transform:rotate(-4deg);
  --fill:linear-gradient(140deg,rgba(255,255,255,.9),rgba(238,238,238,.72) 45%,rgba(214,214,214,.55));
  --edge:linear-gradient(150deg,#fff,rgba(255,255,255,.25) 50%,rgba(255,255,255,.7));
  --shadow:inset 0 1px 0 #fff,0 50px 90px -30px rgba(0,0,0,.85)}
.s2.compact .fcard{left:318px;top:22px}
.fc-smoke{position:absolute;right:10px;top:-40px;width:280px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(105,105,105,.32),transparent);filter:blur(12px)}
.fc-blob{position:absolute;right:-50px;bottom:-70px;width:330px;height:250px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,130,124,.95),rgba(203,255,252,.6) 55%,transparent);filter:blur(10px)}
.fc-dot{position:absolute;right:64px;bottom:86px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(250,209,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 26px rgba(250,209,255,.6)}
.fc-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:#0E2A28}
.fc-arrow{position:absolute;right:32px;top:32px;width:26px;height:26px;color:#222}
.fc-body{position:relative;height:100%;transition:opacity .2s}
.fc-body.fade{opacity:0}
.fc-title{padding-right:48px;font-size:27px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.fc-range{font-size:17px;color:rgba(0,0,0,.34);margin-top:2px}
.fc-pct{position:absolute;left:0;bottom:0;font-size:64px;line-height:1;letter-spacing:-.02em}
.fc-pct small{font-size:44px;font-weight:400}


/* =========================================================
   03 · MOSS RING
   ========================================================= */
.s3{height:calc(792px * var(--k3,1));
  background:
    radial-gradient(32% 30% at 68% 3%,rgba(203,255,252,.4),transparent 70%),
    radial-gradient(28% 24% at 44% 0%,rgba(0,130,124,.5),transparent 70%),
    radial-gradient(45% 40% at 98% 34%,rgba(250,209,255,.18),transparent 70%),
    radial-gradient(40% 40% at 0% 60%,rgba(0,130,124,.3),transparent 70%),
    linear-gradient(180deg,#0f4f47 0%,#0a3d37 42%,#06231f 100%)}
.s3-stage{position:absolute;left:50%;top:0;width:990px;height:792px;transform-origin:50% 0;transform:translateX(-50%) scale(var(--k3,1))}
.s3-title{position:absolute;left:28px;top:30px;font-size:14px;font-weight:500;line-height:1.3;color:#f2f7f5}
.orb-box{position:absolute;left:232px;top:152px;width:520px;height:520px;container-type:inline-size}
.orb-box svg,.orb-box canvas{position:absolute;inset:0;width:100%;height:100%}
.orb-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(203,255,252,.28),transparent);filter:blur(30px)}
.orb-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;
  color:#fff;text-shadow:0 2px 30px rgba(1,38,36,.7),0 1px 2px rgba(1,38,36,.4)}
.orb-text b{font-weight:300;font-size:29cqw;line-height:.86;letter-spacing:-.03em}
.orb-text span{font-size:3.5cqw;font-weight:500;letter-spacing:.06em;margin-top:2.4cqw}
.seg{fill:none;stroke-width:10;transition:opacity .35s,stroke-width .35s;cursor:pointer}
.ring.focus .seg{opacity:.28}
.ring .seg.on{opacity:1;stroke-width:16}
.stat{--r:14px;--blur:14px;position:absolute;left:var(--x);top:var(--y);width:248px;height:123px;padding:15px 16px 14px;
  display:flex;flex-direction:column;justify-content:space-between;color:#f2f7f5;transition:transform .35s cubic-bezier(.2,.8,.2,1);
  --fill:linear-gradient(150deg,rgba(0,130,124,.28),rgba(6,35,31,.25) 60%,rgba(203,255,252,.12));
  --edge:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 40%,rgba(255,255,255,.05) 70%,rgba(255,255,255,.22));
  --shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 40px -20px rgba(0,0,0,.45)}
.stat.on{transform:translateY(-4px);--edge:linear-gradient(150deg,rgba(255,255,255,.8),rgba(255,255,255,.2) 40%,rgba(255,255,255,.1) 70%,rgba(255,255,255,.4))}
.st-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.st-name{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.25}
.st-badge{flex:none;font-size:11px;font-weight:500;line-height:1;padding:5px 8px;border-radius:999px;color:#0E2A28;background:rgba(203,255,252,.92)}
.st-badge.flat{color:#e6f2ef;background:rgba(255,255,255,.2)}
.st-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.st-val b{font-weight:300;font-size:44px;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st-val em{font-style:normal;font-size:13px;font-weight:500;margin-left:5px}
.st-val small{display:block;font-size:9.5px;color:rgba(242,247,245,.7);margin-top:6px}
.st-chg{font-size:9px;line-height:1.3;color:rgba(242,247,245,.75);padding-bottom:1px}

.s3.compact{height:auto}
.s3.compact .s3-stage{position:relative;left:auto;width:auto;height:auto;transform:none;padding:28px 16px 18px;display:grid;gap:12px}
.s3.compact .s3-title{position:static}
.s3.compact .orb-box{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1;margin:0 0 6px}
.s3.compact .stat{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:118px;gap:14px}
@media (min-width:500px){
  .s3.compact .s3-stage{grid-template-columns:1fr 1fr}
  .s3.compact .s3-title,.s3.compact .orb-box{grid-column:1/-1}
}


/* The orb: the centre of the ring as the same glass as every pane — a
   frosted disc over drifting light, lit from the top-left, a rim that
   catches light, a slow turning highlight inside, breathing slightly. */
.orb-box{isolation:isolate}
.orb-box::before{content:"";position:absolute;inset:14%;border-radius:50%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 32% 30%,rgba(203,255,252,.7),transparent 70%),
    radial-gradient(34% 34% at 72% 68%,rgba(0,130,124,.9),transparent 70%),
    radial-gradient(26% 26% at 62% 26%,rgba(250,209,255,.35),transparent 70%),
    radial-gradient(closest-side,rgba(15,79,71,.9),rgba(6,35,31,.6));
  filter:blur(14px);animation:orbdrift 14s ease-in-out infinite alternate}
.orb-glass{position:absolute;inset:18%;border-radius:50%;
  background:var(--noise),linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 45%,rgba(203,255,252,.08) 75%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -26px 50px rgba(1,20,20,.45),inset 0 0 0 1px rgba(255,255,255,.22),0 50px 90px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(0,130,124,.7);
  animation:orbbreathe 9s ease-in-out infinite alternate}
.orb-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.12) 38%,rgba(203,255,252,.06) 62%,rgba(203,255,252,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.orb-glass::after{content:"";position:absolute;inset:5%;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(203,255,252,.35) 72%,rgba(255,255,255,.14) 78%,transparent 86%);
  animation:orbturn 22s linear infinite;mask:radial-gradient(circle,transparent 60%,#000 62%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%)}
.orb-spec{position:absolute;left:18%;top:10%;width:44%;height:26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.18) 55%,transparent);filter:blur(5px)}
.orb-spec::after{content:"";position:absolute;left:120%;top:250%;width:36%;height:36%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(203,255,252,.4),transparent);filter:blur(6px)}
.orb-sheen{position:absolute;inset:18%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.28),transparent 65%)}
.orb-box:hover .orb-sheen{opacity:1}
@keyframes orbturn{to{transform:rotate(360deg)}}
@keyframes orbbreathe{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes orbdrift{from{transform:translate3d(-3%,-2%,0) rotate(0deg)}to{transform:translate3d(3%,3%,0) rotate(25deg)}}
.orb-text b{font-weight:300}

/* CTA line under the hero only */
.squares .copy .actions{display:none}
.scene{position:relative;overflow:hidden;border-radius:28px;isolation:isolate}
.cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 4px 14px}
.cap b{font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--dim)}
.cap span{font-size:15px;font-weight:500}
.cap em{font-style:normal;font-size:13px;color:var(--dim);margin-left:auto}
.shelf-section .proj{margin-top:18px}
@media (prefers-reduced-motion:reduce){.orb-glass::after,.orb-glass,.orb-box::before{animation:none}.folder,.fcard,.stat{transition:none}}

.glass.lift{transition:transform .5s var(--ease),background .4s ease,box-shadow .4s ease}
.glass.lift:hover{transform:translateY(-4px)}

/* The chosen project, in the main area */
.proj { margin-top: 22px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); overflow: hidden; }
.proj .meta { padding: 28px; border-right: 1px solid rgba(255, 255, 255, .1); }
.proj .meta h3 { font-size: 30px; letter-spacing: -.03em; }
.proj .meta .sub { margin-top: 8px; color: var(--dim); font-size: 14px; }
.proj .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 24px; }
.proj .facts b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.proj .facts span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.proj .meta .btn { margin-top: 24px; }
.proj .plan { padding: 28px; background: rgba(0, 0, 0, .16); }
.proj .plan .bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 12.5px; padding: 5px 0; }
.proj .plan .bar-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.proj .plan .track { position: relative; height: 10px; }
.proj .plan .track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.proj .plan .track i.c { background: var(--lav); box-shadow: 0 0 10px rgba(250, 209, 255, .5); }
.proj .plan .track i.d { background: var(--mint); }
.proj .plan .bar-row em { font-style: normal; font-size: 11px; color: var(--faint); text-align: right; }
.proj .plan .more { margin-top: 10px; font-size: 12px; color: var(--faint); }
.proj .plan .rows-wrap { position: relative; }
.proj .plan .today { position: absolute; top: -6px; bottom: -6px; width: 1px; left: calc(162px + (100% - 214px) * var(--f)); background: var(--mint); opacity: .7; box-shadow: 0 0 10px rgba(203, 255, 252, .6); }
.proj .plan .today i { position: absolute; top: -14px; left: 6px; font-style: normal; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
@media (max-width: 980px) { .proj { grid-template-columns: minmax(0, 1fr); } .proj .meta { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } }
@media (max-width: 760px) { .proj .plan .bar-row { grid-template-columns: 110px minmax(0, 1fr) 34px; } .proj .plan .today { left: calc(122px + (100% - 168px) * var(--f)); } }

/* Page plumbing */
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:#cbfffc;color:#06231f;font-weight:500}
.skip-link:focus{top:16px}
.anchor-alias{display:block;position:absolute;top:0;scroll-margin-top:96px}
#product,#engine,#pricing,#faq,#projects,#squares{scroll-margin-top:96px}
kurdinator-showcase,kurdinator-guided-demo,kurdinator-pricing,kurdinator-nav{display:block}
.product .wrap{position:relative}
.s2 .folder.on .f-front{color:#fff}
.stat{cursor:default}
.stat:focus-visible{outline:2px solid #cbfffc;outline-offset:3px}
.s3.compact .orb-glass{inset:18%}

/* FAQ */
.faq .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq details { padding: 0 22px; overflow: hidden; }
.faq details + details { margin-top: 8px; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-size: 16px; font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--mint); transition: transform .3s var(--ease); }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--dim); font-size: 14.5px; line-height: 1.55; max-width: 62ch; }


/* Phone ------------------------------------------------------------------ */
.hint-phone { display: none; }
@media (max-width: 760px) {
  .hint-desk { display: none; } .hint-phone { display: inline; }
  /* The whole plan fits the phone: no sideways scroll, nothing cut off. */
  .field { height: 296px; }
  .field-in { width: 100%; }
  .pill { height: 36px; font-size: 11.5px; padding: 0 5px 0 9px; gap: 5px; border-radius: 10px; }
  .pill em { font-size: 9.5px; padding: 3px 5px; border-radius: 6px; }
  .mile { font-size: 10.5px; }
  .plan-glass { padding: 16px 14px 14px; }
  .plan-glass .top { flex-wrap: wrap; }
  /* The shelf card reads at arm's length. */
  .s2.compact .fc-title { font-size: 36px; }
  .s2.compact .fc-range { font-size: 22px; }
  .s2.compact .fc-pct { font-size: 72px; }
  /* Six phase cards, two to a row, under the orb. */
  .s3.compact .s3-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 22px 14px 16px; }
  .s3.compact .s3-title, .s3.compact .orb-box { grid-column: 1 / -1; }
  .s3.compact .stat { min-height: 0; padding: 12px 12px 11px; gap: 10px; }
  .s3.compact .st-val b { font-size: 34px; }
  .s3.compact .st-chg { display: none; }
  .s3.compact .st-val small { font-size: 11px; }
  .s3.compact .st-name { font-size: 11px; }
  .cap em { margin-left: 0; flex-basis: 100%; }
  .card-frame { padding: 8px; border-radius: 20px; }
}
@media (max-width: 400px) {
  .s3.compact .st-badge { font-size: 10px; padding: 4px 7px; }
}

/* Late fixes */
@media (max-width: 980px) { .faq .wrap { grid-template-columns: minmax(0, 1fr); } }
footer .cols a.btn { display: inline-flex; width: auto; padding: 0 20px; color: var(--kelp-1); }

/* The shelf sits on the page itself, no box of its own. */
.s2 { background: transparent; }
.s2::before { background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 22px 22px; }