/* EcoCloud Studio kit — cinematic hero design system, shared across top pages.
   Scoped with the st- prefix so it never collides with a page's own inline CSS. */
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-400-latin.woff2') format('woff2');font-weight:300 450;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-500-latin.woff2') format('woff2');font-weight:451 550;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-600-latin.woff2') format('woff2');font-weight:551 700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}

.st{--paper:#F5F1E9;--paper-2:#FBF8F2;--ink:#151309;--ink-2:#443F33;--muted:#8C8676;--faint:#B7B0A0;
  --line:#E4DDCF;--coral:#E9553C;--coral-deep:#C63C26;--pine:#0E332A;--ease:cubic-bezier(.19,1,.22,1)}

.st-grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.45;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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")}

/* top nav */
.st-topnav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:18px min(5vw,54px);font-family:'Inter Tight','Inter',system-ui,sans-serif;transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
.st-topnav.st-scrolled{background:rgba(245,241,233,.8);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line);padding-top:13px;padding-bottom:13px}
.st-brand{display:flex;align-items:center;gap:11px;font-size:22px;font-family:'Fraunces',serif;font-size:20px;letter-spacing:-.02em;font-weight:500;color:var(--ink);text-decoration:none}
.st-brand svg{width:34px;height:34px}.st-brand b{color:var(--coral);font-weight:500}
.st-navlinks{display:flex;gap:30px;font-size:13.5px;color:var(--ink-2)}
.st-navlinks a{text-decoration:none;color:inherit;position:relative;transition:color .25s}
.st-navlinks a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--coral);transition:width .3s var(--ease)}
.st-navlinks a:hover{color:var(--ink)}.st-navlinks a:hover::after{width:100%}
.st-navcta{font-size:13.5px;padding:9px 19px;border-radius:100px;background:var(--ink);color:var(--paper);text-decoration:none;transition:background .25s,transform .25s}
.st-navcta:hover{background:var(--coral);transform:translateY(-1px)}
@media(max-width:720px){.st-navlinks{display:none}}

/* full-bleed breakout so a hero placed inside a narrow container still spans the viewport */
.st-bleed{width:100vw;max-width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
html.st-clip,body.st-clip{overflow-x:hidden}
/* HERO */
.st-hero{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;padding:150px 0 84px}
.st-hero *{box-sizing:border-box}
.st-hero-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 82% 6%,rgba(233,85,60,.10),transparent 46%),
  radial-gradient(90% 80% at 6% 104%,rgba(14,51,42,.06),transparent 50%),
  linear-gradient(180deg,var(--paper-2),var(--paper))}
.st-hero-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85;
  background:radial-gradient(340px 340px at var(--mx,72%) var(--my,26%),rgba(233,85,60,.10),transparent 70%)}
.st-wrap{width:min(1240px,90vw);margin:0 auto}
.st-hero .st-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
.st-kick{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:12px}
.st-kick::before{content:"";width:30px;height:1px;background:var(--coral);opacity:.6}
.st-eyebrow{margin-bottom:28px;opacity:0;animation:st-fade 1s var(--ease) .15s forwards}
.st-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(46px,7vw,104px);letter-spacing:-.035em;line-height:.96;margin:0}
.st-hero h1 .st-l{display:block;overflow:hidden}
.st-hero h1 .st-l span{display:block;transform:translateY(102%);animation:st-rise 1.1s var(--ease) forwards}
.st-hero h1 .st-l:nth-child(2) span{animation-delay:.12s}
.st-hero h1 em{font-style:italic;color:var(--coral);font-weight:300}
.st-sub{margin-top:32px;max-width:460px;font-size:17.5px;line-height:1.62;color:var(--ink-2);font-weight:300;opacity:0;animation:st-fade 1s var(--ease) .7s forwards}
.st-sub b{font-weight:500;color:var(--ink)}
.st-cta{margin-top:38px;display:flex;gap:13px;flex-wrap:wrap;opacity:0;animation:st-fade 1s var(--ease) .9s forwards}
.st-btn{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;padding:15px 26px;border-radius:100px;cursor:pointer;border:none;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.st-btn.st-primary{background:var(--coral);color:#fff;box-shadow:0 12px 30px -12px var(--coral)}
.st-btn.st-primary:hover{background:var(--coral-deep);box-shadow:0 20px 44px -14px var(--coral);transform:translateY(-1px)}
.st-btn.st-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.st-btn.st-ghost:hover{border-color:var(--ink);background:#fff}
.st-btn .st-arw{transition:transform .3s var(--ease)}.st-btn:hover .st-arw{transform:translateX(4px)}
.st-meta{margin-top:50px;display:flex;gap:40px;flex-wrap:wrap;opacity:0;animation:st-fade 1s var(--ease) 1.1s forwards}
.st-meta .st-n{font-family:'Fraunces',serif;font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.st-meta .st-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@keyframes st-rise{to{transform:none}}@keyframes st-fade{to{opacity:1}}

/* ORB visual */
.st-orb{position:relative;aspect-ratio:1;width:100%;max-width:500px;margin-left:auto;justify-self:end}
.st-orb-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(233,85,60,.16),transparent 62%);filter:blur(26px)}
.st-rings{position:absolute;inset:0;width:100%;height:100%;animation:st-spin 60s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-seal{position:absolute;top:50%;left:50%;width:148px;height:148px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff,var(--paper) 70%);
  box-shadow:0 30px 60px -22px rgba(21,19,9,.4),inset 0 2px 5px rgba(255,255,255,.9),inset 0 -8px 20px rgba(198,60,38,.12);
  display:flex;align-items:center;justify-content:center;z-index:3;animation:st-breathe 6s var(--ease) infinite}
@keyframes st-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
.st-seal svg{width:64px;height:64px;color:var(--coral)}
.st-chip{position:absolute;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:13px;padding:11px 15px;font-family:'JetBrains Mono',monospace;font-size:11.5px;box-shadow:0 18px 40px -20px rgba(21,19,9,.35);display:flex;align-items:center;gap:9px;white-space:nowrap;z-index:4;color:var(--ink)}
.st-chip .st-dot{width:7px;height:7px;border-radius:50%}
.st-chip .st-dot.g{background:#C4483C}.st-chip .st-dot.c{background:var(--coral)}.st-chip .st-dot.k{background:var(--ink)}
.st-chip.c1{top:5%;left:-6%;animation:st-flt1 7s var(--ease) infinite}
.st-chip.c2{top:45%;right:-13%;animation:st-flt2 8s var(--ease) infinite}
.st-chip.c3{bottom:5%;left:9%;animation:st-flt3 9s var(--ease) infinite}
@keyframes st-flt1{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes st-flt2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@keyframes st-flt3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:920px){.st-hero .st-wrap{grid-template-columns:1fr}.st-orb{max-width:340px;margin:16px auto 0;grid-row:1}.st-eyebrow{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.st-hero *{animation:none!important}.st-hero h1 .st-l span{transform:none}}