/* ============================================================================
   Varelyno landing v3 — "Too beautiful to be true."

   The page is made OF the product: the real project circles, the real task
   rows, the real note cards, the real people chips. Light, warm and saturated
   — the way the app actually looks, turned up.

   Colour rules:
   - Light mode "glow" = big soft COLOURED shadows + blurred colour behind
     white cards. It reads as radiance, not emission.
   - Every accent is a real colour from the product palette.
   - Grain over the mesh so the big soft gradients never band.
   ========================================================================== */

@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/static/outfit-var.woff2') format('woff2');
}

:root{
  /* --- the product's own palette --- */
  --c-blue:#1E7FD0;
  --c-teal:#00B3A6;
  --c-rose:#C2567F;      /* the Rose theme accent */
  --c-pink:#ED0F68;
  --c-gold:#F0A52B;
  --c-purple:#7C5CE7;
  --c-green:#2FA96B;

  /* --- paper --- */
  --paper:#FFFFFF;
  --paper-2:#FDFBFF;
  --bg:#FBF7FD;

  /* --- ink --- */
  --ink:#141F3A;
  --ink-2:#3C4A66;
  --ink-soft:#66748F;
  --ink-faint:#93A0B6;

  --line:rgba(24,40,90,.09);
  --line-2:rgba(24,40,90,.055);

  --display:'Outfit',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --wrap:1220px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* the signature soft lift used on every floating element */
  --lift:0 2px 6px rgba(28,45,95,.05),0 14px 34px -12px rgba(28,45,95,.16);
  --lift-lg:0 4px 10px rgba(28,45,95,.06),0 34px 70px -26px rgba(28,45,95,.28);
}

/* ---------------------------------------------- big monitors get more page
   The layout was capped at 1220px, which left a wide monitor mostly empty.
   The shell now grows with the screen; paragraph measures stay capped in `ch`
   separately, so lines never become uncomfortably long to read. */
@media(min-width:1560px){ :root{--wrap:1400px} }
@media(min-width:1800px){ :root{--wrap:1560px} }
@media(min-width:2200px){ :root{--wrap:1720px} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:rgba(194,86,127,.20)}
:focus-visible{outline:2px solid var(--c-rose);outline-offset:3px;border-radius:8px}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}

/* -------------------------------------------------------------- the light
   A mesh of the product's colours, heavily blurred. This is what makes the
   page feel lit from behind rather than printed on white. */
.mesh{position:fixed;inset:-25%;z-index:0;pointer-events:none;filter:blur(60px)}
.mesh i{position:absolute;display:block;border-radius:50%;opacity:.55;animation:drift 30s ease-in-out infinite alternate}
.m-rose  {width:52vw;height:52vw;left:-8%;top:-10%;background:radial-gradient(circle,rgba(233,142,180,.85),rgba(233,142,180,0) 68%)}
.m-blue  {width:48vw;height:48vw;right:-10%;top:-6%;background:radial-gradient(circle,rgba(120,185,255,.80),rgba(120,185,255,0) 68%);animation-delay:-8s}
.m-gold  {width:38vw;height:38vw;left:30%;top:-18%;background:radial-gradient(circle,rgba(255,206,130,.70),rgba(255,206,130,0) 68%);animation-delay:-15s}
.m-teal  {width:44vw;height:44vw;left:-6%;bottom:-18%;background:radial-gradient(circle,rgba(120,229,216,.62),rgba(120,229,216,0) 68%);animation-delay:-21s}
.m-purple{width:42vw;height:42vw;right:2%;bottom:-20%;background:radial-gradient(circle,rgba(180,160,255,.66),rgba(180,160,255,0) 68%);animation-delay:-4s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,-3.5%,0) scale(1.12)}}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  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='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ================================================================= header */
.lv-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px min(4vw,32px);
  transition:background .35s ease,box-shadow .35s ease;
}
.lv-header.is-stuck{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 1px 0 var(--line-2),0 10px 30px -22px rgba(28,45,95,.4);
}
/* the product's real 4-colour accent strip */
.lv-header::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-teal) 34%,var(--c-rose) 68%,var(--c-gold));
}
.lv-brand{display:flex;align-items:center;gap:11px;font-weight:650;font-size:21px;letter-spacing:-.03em}
.lv-brand img{width:36px;height:36px}
.lv-nav{display:flex;gap:26px;font-size:14px;color:var(--ink-soft);font-weight:450}
.lv-nav a{transition:color .2s}
.lv-nav a:hover{color:var(--c-rose)}
.lv-head-actions{display:flex;align-items:center;gap:14px}
.lv-signin{font-size:14px;color:var(--ink-2);font-weight:500;transition:color .2s}
.lv-signin:hover{color:var(--c-rose)}

/* ================================================================ buttons */
.btn3{
  --bc:var(--c-rose);
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:0;
  font-weight:600;font-size:15px;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,#E2799F,var(--bc) 46%,#9C3F64);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 24px -8px rgba(194,86,127,.58),
    0 0 44px -16px rgba(194,86,127,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;
}
.btn3:hover{
  transform:translateY(-2px);filter:saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 18px 34px -8px rgba(194,86,127,.62),
    0 0 70px -14px rgba(194,86,127,.85);
}
.btn3 span{transition:transform .3s var(--ease)}
.btn3:hover span{transform:translate(3px,-3px)}

.btn3.ghost{
  color:var(--ink);
  background:rgba(255,255,255,.76);
  border:1px solid var(--line);
  box-shadow:var(--lift);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.btn3.ghost:hover{background:#fff;box-shadow:var(--lift-lg)}
.btn3.small{padding:10px 18px;font-size:13.5px}

/* ================================================================== hero */
.hero3{
  position:relative;z-index:2;
  min-height:100svh;display:flex;align-items:center;
  padding:128px 0 60px;
}
.hero3 .wrap{
  position:relative;z-index:3;      /* above the far/mid depth, below the near */
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:min(4vw,50px);align-items:center;
}

.eyebrow3{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-rose);
  padding:8px 16px 8px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(194,86,127,.18);
  box-shadow:var(--lift);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.eyebrow3 i{
  width:7px;height:7px;border-radius:50%;background:var(--c-rose);
  box-shadow:0 0 0 3px rgba(194,86,127,.16);
  animation:beacon 2.6s ease-in-out infinite;
}
@keyframes beacon{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

.hero3 h1{
  margin:24px 0 0;
  font-size:clamp(37px,4.3vw,78px);   /* keeps growing on large monitors */
  line-height:1.02;font-weight:600;letter-spacing:-.037em;
}
.hero3 h1 em{
  font-style:normal;font-weight:680;
  background:linear-gradient(96deg,var(--c-blue) 0%,var(--c-teal) 24%,var(--c-purple) 50%,var(--c-rose) 74%,var(--c-gold) 100%);
  background-size:150% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 11s ease-in-out infinite alternate;
}
@keyframes sheen{from{background-position:0% 50%}to{background-position:100% 50%}}

.hero3 .lede{
  margin:22px 0 0;max-width:33em;
  font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.62;
  color:var(--ink-soft);font-weight:350;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-micro{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:12.5px;color:var(--ink-faint)}
.hero-micro b{color:var(--ink-2);font-weight:550}

/* ==================================================== depth of field ======
   A real lens doesn't hold everything in focus. Decorative copies of the
   product's own elements sit at three depths around the hero: far ones small,
   pale and softly blurred; mid ones nearly sharp; and near ones large, heavily
   blurred and cropped by the edges of the frame, like foreground bokeh.
   Purely decorative and inert — aria-hidden, no pointer events, never focusable.
   The sharp network sits between the far and near layers, so it reads as the
   plane the camera is focused on. */
.depth{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dnode{
  position:absolute;translate:-50% -50%;
  width:var(--s);height:var(--s);border-radius:50%;
  /* A thick colour-scaled border so that, once blurred, it still reads as a
     project circle's progress ring rather than a vague pale blob. The sharp
     nodes use a 1.25px border; at these distances that would vanish. */
  border:calc(var(--s) * .042) solid color-mix(in srgb,var(--node) 64%,#fff);
  background:radial-gradient(circle at 32% 23%,
    #fff 14%,
    color-mix(in srgb,var(--node) 15%,#fff) 66%,
    color-mix(in srgb,var(--node) 26%,#fff));
  box-shadow:0 18px 44px color-mix(in srgb,var(--node) 22%,transparent);
}
/* a blurred stand-in for the floating cards, for variety of shape */
.dcard{
  position:absolute;translate:-50% -50%;
  width:var(--w);height:var(--h);border-radius:16px;
  /* tinted, not plain white — an untinted blur just looks like blank paper */
  background:linear-gradient(140deg,
    rgba(255,255,255,.92),
    color-mix(in srgb,var(--node,#8FA9D0) 20%,rgba(255,255,255,.86)));
  border:1px solid color-mix(in srgb,var(--node,#8FA9D0) 26%,var(--line));
  box-shadow:0 18px 44px color-mix(in srgb,var(--node,#8FA9D0) 18%,transparent);
}
.depth .far {filter:blur(5px);opacity:.62;z-index:0}
.depth .mid {filter:blur(2px);opacity:.80;z-index:1}
/* foreground: big and soft. Kept below full strength so it reads as an
   out-of-focus object in front of the lens, not as content competing for
   attention with the headline. */
.depth .near{filter:blur(16px);opacity:.50;z-index:9}

@media(prefers-reduced-motion:reduce){.depth{opacity:.7}}
/* keep the foreground clear of the copy on small screens */
@media(max-width:1080px){.depth .near{display:none}.depth .far{opacity:.3}}

/* ------------------------------------------------- hero stage: the circles
   These are the app's REAL project nodes, not a drawing of them. Markup and
   values lifted from the running product (renderProjectNode in app.js, plus
   the computed style of a live node): the radial sheen, the colour-mixed
   border, the coloured drop shadow with an inset white highlight, the 740
   title, the bordered status pill and the SVG progress ring. Sizes are in
   cqw so the whole network scales with the stage. */
.hero-stage{
  position:relative;aspect-ratio:1/1;width:100%;max-height:74svh;margin-inline:auto;
  container-type:inline-size;container-name:stage;
}

/* the connectors, behind everything */
.net-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.net-links line{stroke-width:1.4;stroke-linecap:round}

/* ---- the node itself ---- */
.pnode{
  --s:24cqw;
  position:absolute;z-index:3;
  width:var(--s);height:var(--s);
  translate:-50% -50%;
  border-radius:50%;
  border:1.25px solid color-mix(in srgb,var(--node) 70%,#DDE5EE);
  background:radial-gradient(circle at 32% 23%,
    #fff 12%,
    color-mix(in srgb,var(--node) 10%,#fff) 72%,
    color-mix(in srgb,var(--node) 16%,#fff));
  box-shadow:
    0 12px 30px color-mix(in srgb,var(--node) 13%,transparent),
    inset 0 2px 5px rgba(255,255,255,.8);
  display:grid;place-items:center;text-align:center;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pnode:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 44px color-mix(in srgb,var(--node) 22%,transparent),
    0 0 0 5px color-mix(in srgb,var(--node) 11%,transparent),
    inset 0 2px 5px rgba(255,255,255,.8);
}
.pnode .project-label{
  width:83%;height:63%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:calc(var(--s) * .027);min-width:0;pointer-events:none;
}
.pnode .title{
  font-size:calc(var(--s) * .119);
  font-weight:740;letter-spacing:-.35px;line-height:1.2;
  color:#243B4E;
  max-width:100%;overflow-wrap:anywhere;
}
.pnode .status{
  font-size:calc(var(--s) * .062);
  padding:.30em .52em;border-radius:7px;
  background:#fff;border:1.25px solid #DCE5EB;color:#243B4E;
  white-space:nowrap;line-height:1.2;
}

/* ---- the progress ring, exactly as the app draws it ---- */
.node-progress{
  position:absolute;inset:-4.5%;width:109%;height:109%;
  overflow:visible;transform:rotate(-90deg);pointer-events:none;
}
.node-progress circle{fill:none}
.node-progress .progress-base{stroke:rgba(24,40,90,.10);stroke-width:2}
.node-progress .progress-value{
  stroke:var(--node);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--node) 65%,transparent));
}

/* ---- YOU at the centre ---- */
.you-node{
  --s:18cqw;
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:var(--s);height:var(--s);border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c-rose) 62%,#DDE5EE);
  background:radial-gradient(circle at 32% 23%,#fff 14%,color-mix(in srgb,var(--c-rose) 9%,#fff) 74%,color-mix(in srgb,var(--c-rose) 15%,#fff));
  box-shadow:0 14px 34px color-mix(in srgb,var(--c-rose) 17%,transparent),inset 0 2px 5px rgba(255,255,255,.85);
  display:grid;place-items:center;text-align:center;
}
.you-node b{display:block;font-size:calc(var(--s) * .18);font-weight:780;letter-spacing:-.02em;color:var(--c-rose);line-height:1}
.you-node small{display:block;font-size:calc(var(--s) * .088);color:var(--ink-faint);margin-top:.35em}

/* ---- people: the app's small ringed initials ---- */
.person-node{
  --s:8.4cqw;
  position:absolute;z-index:5;translate:-50% -50%;
  width:var(--s);height:var(--s);border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  border:1.6px solid color-mix(in srgb,var(--node) 72%,#fff);
  box-shadow:0 6px 16px color-mix(in srgb,var(--node) 22%,transparent);
  font-size:calc(var(--s) * .34);font-weight:750;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--node) 78%,#243B4E);
  transition:transform .35s var(--ease);
}
.person-node:hover{transform:translateY(-3px) scale(1.06)}

/* ------------------------------------------- real product cards, floating */
.float-card{
  position:absolute;z-index:4;
  background:rgba(255,255,255,.90);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--lift-lg);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:13px 15px;
  animation:floaty 8s ease-in-out infinite;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.float-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 6px 14px rgba(28,45,95,.08),0 44px 84px -28px rgba(28,45,95,.36)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.fc-label{
  display:block;font-size:9.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;
}

/* --- a real task row --- */
.fc-task{left:-9%;top:1%;width:248px;animation-delay:-1s}
.fc-task .t-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35;color:var(--ink);font-weight:450}
.fc-task .tick{
  flex:0 0 auto;width:17px;height:17px;border-radius:5px;margin-top:1px;
  border:1.6px solid rgba(24,40,90,.22);background:#fff;position:relative;
  transition:background .22s,border-color .22s;
}
.fc-task .t-row.done .tick{background:var(--c-green);border-color:var(--c-green)}
.fc-task .t-row.done .tick::after{
  content:'';position:absolute;left:5px;top:1.5px;width:4.5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.fc-task .t-row.done span{color:var(--ink-faint);text-decoration:line-through}
.fc-task .t-meta{display:flex;align-items:center;gap:7px;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-2);font-size:10.5px;color:var(--ink-soft)}
.fc-task .dot{width:7px;height:7px;border-radius:50%;background:var(--c-blue)}
.fc-task .pill{margin-left:auto;padding:2.5px 8px;border-radius:999px;background:rgba(240,165,43,.16);color:#9A6A10;font-size:9.5px;font-weight:650}

/* --- a real note card --- */
.fc-note{right:-10%;top:-2%;width:222px;animation-delay:-4s}
.fc-note h4{margin:0 0 7px;font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fc-note p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);font-weight:350}
.fc-note .n-foot{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:9px;border-top:1px solid var(--line-2);font-size:10px;color:var(--ink-faint)}
.fc-note .n-foot b{font-weight:550;color:var(--ink-soft)}

/* --- a real person chip --- */
.fc-person{right:-7%;bottom:4%;width:204px;animation-delay:-6.5s;display:flex;align-items:center;gap:11px;padding:12px 14px}
.fc-person .av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#E2799F,var(--c-rose));
  box-shadow:0 6px 16px -6px rgba(194,86,127,.7);
}
.fc-person strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em}
.fc-person small{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:1px}

/* --- real stat tiles --- */
.fc-stats{left:-6%;bottom:-1%;width:236px;animation-delay:-2.5s;padding:13px 14px}
.fc-stats .s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc-stats .s-grid div{
  text-align:center;padding:9px 4px;border-radius:11px;
  background:var(--sb,rgba(30,127,208,.08));
}
.fc-stats .s-grid b{display:block;font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--sc,var(--c-blue));line-height:1}
.fc-stats .s-grid small{display:block;font-size:8.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}

/* ---------------------------------------------------------- scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.scroll-cue span{
  width:1px;height:38px;
  background:linear-gradient(180deg,rgba(100,120,170,.45),rgba(100,120,170,0));
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================ the strip */
.after-hero{position:relative;z-index:2;padding:0 0 84px}
.marquee-strip{
  display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:20px 0 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.marquee-strip b{font-weight:600;display:inline-flex;align-items:center;gap:8px}
.marquee-strip b::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--mc,var(--c-blue));box-shadow:0 0 0 3px color-mix(in srgb,var(--mc,var(--c-blue)) 16%,transparent);
}

/* ============================================================ responsive */
@media(max-width:1080px){
  .hero3 .wrap{grid-template-columns:1fr;gap:42px;text-align:center}
  .hero3 .lede{margin-inline:auto}
  .hero-cta,.hero-micro{justify-content:center}
  .hero-stage{max-width:540px;max-height:none}
  .lv-nav{display:none}
  .fc-task{left:-4%}.fc-note{right:-4%}.fc-person{right:-2%}.fc-stats{left:0}
}
@media(max-width:760px){
  .hero3{padding:106px 0 48px;min-height:auto}
  .hero3 h1{font-size:clamp(33px,8.6vw,50px)}
  .scroll-cue{display:none}
  /* keep only the two most characterful cards so it never gets busy */
  .fc-note,.fc-stats{display:none}
  .fc-task{left:-3%;top:4%;width:200px}
  .fc-person{right:-3%;bottom:6%;width:180px}
}

/* Without landing-motion.js a device that asks for less motion gets none.
   With it (html.lm-js), that script decides -- fades, and a small slow lift. */
@media(prefers-reduced-motion:reduce){
  html:not(.lm-js) *,html:not(.lm-js) *::before,html:not(.lm-js) *::after{animation:none!important;transition-duration:.01ms!important}
  html.lm-js *,html.lm-js *::before,html.lm-js *::after{animation:none!important}
}