/* Nordform — "Reverse" layer (loaded after site.css).
   Light, mirrored take on the original: colours reversed (light page, dark ink, accents in reverse order),
   hover bars grow from the right and sit at the bottom, hero aligned left, new symbols and micro-animations.
   Remove the <link> to reverse.css and the micro.js <script> in base.html to go back to the original layer. */

:root{
  --red:#c8324f;
  --line:color-mix(in srgb,var(--text) 8%,transparent);
  --line-2:color-mix(in srgb,var(--text) 14%,transparent);
  --body-text:color-mix(in srgb,var(--text) 55%,var(--muted));
  --shadow-1:0 1px 2px color-mix(in srgb,var(--text) 6%,transparent),0 8px 24px -14px color-mix(in srgb,var(--text) 22%,transparent);
  --shadow-2:0 2px 4px color-mix(in srgb,var(--text) 5%,transparent),0 24px 48px -22px color-mix(in srgb,var(--text) 32%,transparent);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html.inverse{--red:#ff5a78}
::selection{background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--text)}

/* ───────── symbols */
.arr{width:18px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.arr.up{width:11px;height:16px}
.arr.back{vertical-align:-1px;margin-right:4px}
.arr-wrap{display:inline-flex;overflow:hidden;padding:2px 0}
.arrow-link:hover .arr-wrap .arr{animation:arrowLoop .55s var(--ease)}
@keyframes arrowLoop{0%{transform:none}45%{transform:translateX(130%);opacity:0}46%{transform:translateX(-130%);opacity:0}100%{transform:none;opacity:1}}
.arrow-link:hover{gap:12px}

.ck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.ck path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s var(--ease) calc(var(--i,0) * 70ms + 250ms)}
.in .ck path,.success .ck path,html:not(.js) .ck path{stroke-dashoffset:0}
.checks li span,.included-grid li span,.marks span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-top:0;font-size:0;
  background:color-mix(in srgb,currentColor 10%,transparent)}
.checks li{align-items:center}
.marks li{align-items:center}
.marks span{width:18px;height:18px}
.marks .ck{width:12px;height:12px}
.m-no span{opacity:.75}
.success .glyph{border-radius:14px;transform:rotate(45deg)}
.success .glyph .ck{width:24px;height:24px;transform:rotate(-45deg)}
.success .ck path{transition-delay:.3s}

/* brand mark: a diamond that squares up on hover */
.brand-mark,.sigil{border-radius:9px;transform:rotate(45deg);transition:transform .6s var(--spring),background .3s,color .3s;width:30px;height:30px;
  border-color:color-mix(in srgb,var(--green) 70%,transparent)}
.brand-mark b,.sigil b{font-weight:500;transform:rotate(-45deg);transition:transform .6s var(--spring);display:block}
.brand:hover .brand-mark,.footer-logo:hover .sigil{transform:rotate(180deg);background:var(--green);color:var(--bg)}
.brand:hover .brand-mark b,.footer-logo:hover .sigil b{transform:rotate(-180deg)}
.brand-name{color:var(--text);letter-spacing:.18em;transition:letter-spacing .5s var(--ease)}
.brand:hover .brand-name{letter-spacing:.24em}

/* quote mark — low opening quote instead of the high one */
.quote p::before{content:"„";top:auto;bottom:-.2em;left:auto;right:-.3em;font-size:6rem;color:var(--green);opacity:.25}

/* faq: chevron instead of plus */
.faq summary::after{content:"";width:9px;height:9px;margin-top:6px;flex:none;border-right:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(45deg);transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details[open] p{animation:fadeDown .45s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ───────── header */
.site-header{transition:background .3s,border-color .3s,box-shadow .3s}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);box-shadow:0 10px 30px -24px color-mix(in srgb,var(--text) 40%,transparent)}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.scroll-progress i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--green),var(--violet),var(--gold))}
.nav-link::after{transform-origin:center;height:2px;border-radius:2px;bottom:-7px}
.nav-link.on::before{content:"";position:absolute;left:-10px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:1px;transform:rotate(45deg);background:var(--green)}

.mode-toggle{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;
  transition:border-color .3s,transform .3s var(--spring)}
.mode-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .7s var(--spring)}
.mode-toggle .mt-fill{fill:currentColor;stroke:none}
.mode-toggle:hover{border-color:var(--green);transform:scale(1.08)}
html.inverse .mode-toggle svg{transform:rotate(180deg)}

/* menu toggle: three lines → × */
.nav-toggle{gap:4px;border-radius:50%}
.nav-toggle span{width:14px;height:1.5px;border-radius:2px;transition:transform .4s var(--spring),opacity .2s,width .3s var(--ease)}
.nav-toggle span:nth-child(2){width:9px;margin-left:5px}
.nav-toggle:hover span:nth-child(2){width:14px;margin-left:0}
.menu-open .nav-toggle span:first-child{transform:translateY(5.5px) rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-open .nav-toggle span:last-child{transform:translateY(-5.5px) rotate(-45deg)}

/* ───────── buttons: ripple + magnetic */
.btn,.plan-cta,.micro-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-hero,.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-hero:hover,.btn-primary:hover{background:var(--green);border-color:var(--green);color:var(--bg)}
.btn-hero-ghost{color:var(--text);border-color:color-mix(in srgb,var(--text) 22%,transparent)}
.btn-hero-ghost:hover,.btn-ghost:hover{border-color:var(--text)}
.btn-gold{background:transparent;color:var(--text);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.btn-gold::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 30%,transparent),transparent);transform:translateX(-100%);transition:transform .7s var(--ease)}
.btn-gold:hover::after{transform:translateX(100%)}
.btn-hero,.btn-hero-ghost{border-radius:999px}
.magnetic{transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.ripple{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:currentColor;opacity:.28;z-index:-1;
  animation:ripple .7s var(--ease) forwards}
@keyframes ripple{to{transform:scale(var(--rs,30));opacity:0}}

/* ───────── hero: left-aligned, orbit ornament on the right */
.hero{align-items:center;text-align:left}
.hero-content{width:min(1200px,90vw);max-width:none;padding-inline:24px}
.hero-subtitle{margin:28px 0 0;max-width:520px}
.hero-actions{justify-content:flex-start}
.final-cta .hero-actions{justify-content:center}
.hero-eyebrow{display:flex;align-items:center;gap:14px}
.hero-eyebrow::before{content:"";width:44px;height:1px;background:currentColor;transform-origin:left;animation:lineIn 1s var(--ease) .3s both}
@keyframes lineIn{from{transform:scaleX(0)}}
.hero-bg{opacity:.1;mix-blend-mode:multiply;filter:grayscale(.4)}
html.inverse .hero-bg{mix-blend-mode:screen;opacity:.18}
.hero-glow{background:radial-gradient(45% 50% at 78% 45%,color-mix(in srgb,var(--green) 10%,transparent),transparent 70%),
                     radial-gradient(35% 40% at 70% 70%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 70%)}
.orbit{position:absolute;top:50%;left:78%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--text) 16%,transparent);transform:translate(-50%,-50%)}
.orbit.o1{width:min(52vw,640px);aspect-ratio:1;animation:spin 90s linear infinite}
.orbit.o2{width:min(34vw,420px);aspect-ratio:1;border-style:solid;border-color:color-mix(in srgb,var(--green) 22%,transparent);animation:spin 60s linear infinite reverse}
.orbit::after{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:2px;transform:rotate(45deg);background:var(--green)}
.orbit.o1::after{background:var(--violet);width:7px;height:7px;top:-4px}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-line .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);animation:wIn .9s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 150ms)}
.hero-line.split{animation:none}
.hero-line.split em{display:inline-block;opacity:0;transform:translateY(.4em) scale(.92);animation:wIn 1s var(--spring) both;animation-delay:calc(var(--i) * 70ms + 250ms)}
@keyframes wIn{to{opacity:1;transform:none}}
.scroll-cue{left:auto;right:max(5vw,24px);bottom:36px;flex-direction:row-reverse;gap:12px}
.scroll-cue .mouse{width:20px;height:32px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--text) 35%,transparent);background:none;position:relative;animation:none}
.scroll-cue .mouse b{position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--green);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:none;opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* ───────── section heads: centred lines draw in either side of the eyebrow */
.section-head .eyebrow,.process-head .eyebrow,.final-cta .eyebrow{display:inline-flex;align-items:center;gap:12px}
.section-head .eyebrow::before,.section-head .eyebrow::after,.process-head .eyebrow::before,.process-head .eyebrow::after,.final-cta .eyebrow::before,.final-cta .eyebrow::after{
  content:"";width:28px;height:1px;background:currentColor;opacity:.6;transform:scaleX(0);transition:transform .9s var(--ease) .35s}
.section-head .eyebrow::before,.process-head .eyebrow::before,.final-cta .eyebrow::before{transform-origin:right}
.section-head .eyebrow::after,.process-head .eyebrow::after,.final-cta .eyebrow::after{transform-origin:left}
.section-head.left .eyebrow::after{display:none}
.in .eyebrow::before,.in .eyebrow::after,.in.eyebrow::before{transform:scaleX(1)}
.section-head .h2 em,.process-title em,.final-title em,.bc-title em{position:relative}
.section-head .h2 em::after,.process-title em::after,.final-title em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.08em;border-radius:1em;background:currentColor;opacity:.35;
  transform:scaleX(0);transform-origin:right;transition:transform 1s var(--ease) .6s}
.in .h2 em::after,.in .process-title em::after,.in .final-title em::after{transform:scaleX(1)}

/* ───────── cards: soft corners, light shadows, bars at the bottom growing from the right */
.audience-grid,.bento,.timeline,.plans,.compare,.calc-results,.work-grid,.demo-grid,.included-grid{gap:10px}
.audience,.bento-card,.t-step,.cmp,.work-card,.demo-card,.included-grid li,.trend,.faq details,.guarantee-inner,.care,.form-card,.total,.calc-inputs,.calc-card{
  border-radius:var(--radius)!important;box-shadow:var(--shadow-1)}
.plan{border-radius:var(--radius)!important;box-shadow:var(--shadow-1)}
.trends,.faq{gap:10px}
.calc-inputs{margin-bottom:10px}
.audience{background:var(--surface)}
.audience:hover,.bento-card:hover,.t-step:hover,.cmp:hover,.work-card:hover,.demo-card:hover,.plan:hover,.trend:hover{box-shadow:var(--shadow-2)}
.audience::before,.bento-card::before,.t-step::before,.plan::before,.cmp::before,.work-card::before,.demo-card::before{top:auto;bottom:0;transform-origin:right}
.bento-card::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tone) 10%,transparent),transparent 60%)}
.bc-visual{background:color-mix(in srgb,var(--bg) 70%,transparent);border-color:var(--line)}
.ring b{background:var(--surface)}
.stats{background:transparent;gap:10px}
.stat{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.stat:hover{background:var(--surface2)}
.stat-suffix{display:inline-block}
.stat.pop .stat-suffix{animation:pop .5s var(--spring)}
@keyframes pop{40%{transform:scale(1.35) rotate(-6deg)}}
.plan.popular{box-shadow:var(--shadow-2),0 0 0 1.5px color-mix(in srgb,var(--tone) 45%,transparent)}
.plan-icon,.audience-icon{border-radius:50%;transition:transform .6s var(--spring)}
.plan:hover .plan-icon,.audience:hover .audience-icon{transform:rotate(-20deg) scale(1.1)}
.step-num{border-radius:14px;transform:rotate(45deg);background:var(--surface);transition:transform .7s var(--spring)}
.step:hover .step-num{transform:rotate(225deg)}
.step-num>b{display:block;font-weight:inherit;transform:rotate(-45deg);transition:transform .7s var(--spring)}
.step:hover .step-num>b{transform:rotate(-225deg)}
.step-glyph{transition:transform .6s var(--spring)}
.step:hover .step-glyph{transform:translateY(-6px) scale(1.15)}
.t-marker{border-radius:12px;transition:transform .5s var(--spring),background .4s}
.t-step:hover .t-marker{transform:rotate(-8deg) scale(1.08)}
.included-grid li{background:var(--surface)}
.included-grid li:hover{transform:translateY(-2px)}
.work-img,.demo-screen{border-radius:calc(var(--radius) - 6px)}
.work-img img,.demo-cover{filter:saturate(.75);transition:transform .8s var(--ease),filter .6s var(--ease),opacity .6s var(--ease)}
.work-card:hover .work-img img,.demo-card:hover .demo-cover{filter:none}
.demo-browser{border-radius:calc(var(--radius) - 4px);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--text) 50%,transparent)}
.demo-modal{border-radius:var(--radius)}
.demo-modal[open]{animation:modalIn .45s var(--spring)}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(12px)}}
.demo-modal::backdrop{background:color-mix(in srgb,var(--text) 45%,transparent)}
.social a{border-radius:50%;transition:transform .35s var(--ease),color .3s,background .3s,border-color .3s}
.social a:hover{transform:translateY(-3px) rotate(-8deg)}
.footer-col a{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:color .2s,background-size .4s var(--ease)}
.footer-col a:hover{background-position:0 100%;background-size:100% 1px}
.to-top-link{display:inline-flex;align-items:center;gap:8px}
.to-top-link:hover .arr{animation:bob .6s var(--ease)}
@keyframes bob{50%{transform:translateY(-4px)}}
.prose a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease)}
.prose a:hover{background-size:0 1px;background-position:100% 100%}
.form input,.form textarea,.calc-field input{border-radius:10px;background:var(--surface)}
.chip span{border-radius:999px;transition:all .25s var(--ease)}
.chip input:checked+span{animation:pop .4s var(--spring)}
.band{background:radial-gradient(70% 80% at 50% 100%,color-mix(in srgb,var(--band) 8%,transparent),transparent 70%),linear-gradient(var(--card),var(--surface))}

/* ───────── floating back-to-top with progress ring */
.to-top{position:fixed;right:24px;bottom:24px;z-index:60;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  color:var(--text);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow-2);text-decoration:none;
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--spring)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover .arr{animation:bob .6s var(--ease)}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:2}
.ring-svg circle{stroke:var(--line-2)}
.ring-svg .ring-val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:calc(125.7 * (1 - var(--p,0)))}
.cookie:not([hidden])~.to-top,body:has(.cookie:not([hidden])) .to-top{bottom:84px}
.cookie:not([hidden]){animation:slideUp .6s var(--ease)}
@keyframes slideUp{from{transform:translateY(100%)}}

/* ───────── reveal: wipe-up instead of blur-rise */
.js .reveal{filter:none;transform:translateY(28px) scale(.985);
  transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js .reveal.in{animation:wipe 1s var(--ease) var(--d,0ms) both}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-150px -150px -150px -150px)}}
.js .reveal.done{animation:none;transition:transform .35s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .3s}
.js .audience.reveal:first-child:not(.in){transform:translateX(60px)}
.js .audience.reveal:nth-child(2):not(.in){transform:translateX(-60px)}
@media (min-width:769px){
  .js .t-step.reveal:nth-child(odd):not(.in){transform:translateX(40px)}
  .js .t-step.reveal:nth-child(even):not(.in){transform:translateX(-40px)}
}
.tilt{will-change:transform}

/* colour-reverse transition (View Transitions API: circle grows from the toggle) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-run::view-transition-new(root){animation:vtCircle .7s var(--ease)}
@keyframes vtCircle{from{clip-path:circle(0 at var(--vx,90%) var(--vy,0))}to{clip-path:circle(var(--vr,150vmax) at var(--vx,90%) var(--vy,0))}}

/* ───────── responsive */
@media (max-width:1024px){
  .main-nav{left:auto;width:min(320px,86vw);height:calc(100svh - 64px);padding:16px 28px;border-left:1px solid var(--line);background:var(--bg);
    transform:translateX(24px);box-shadow:var(--shadow-2)}
  .menu-open .main-nav .nav-link{animation:navIn .5s var(--ease) both}
  .menu-open .main-nav .nav-link:nth-child(2){animation-delay:.05s}.menu-open .main-nav .nav-link:nth-child(3){animation-delay:.1s}
  .menu-open .main-nav .nav-link:nth-child(4){animation-delay:.15s}.menu-open .main-nav .nav-link:nth-child(5){animation-delay:.2s}
  .menu-open .main-nav .nav-link:nth-child(n+6){animation-delay:.25s}
  .nav-link.on::before{left:auto;right:0}
  .orbit{left:85%;opacity:.6}
}
@keyframes navIn{from{opacity:0;transform:translateX(20px)}}
@media (max-width:900px){
  .plan.popular{transform:none}
}
@media (max-width:768px){
  .hero{text-align:left}
  .scroll-cue{display:none}
  .header-actions{gap:10px}
  .orbit{display:none}
}
@media (max-width:480px){
  .header-actions .btn-sm{white-space:nowrap}
  .brand-name{font-size:1rem;letter-spacing:.12em}
  .brand:hover .brand-name{letter-spacing:.14em}
  .header-inner{gap:8px}
  .hero-actions{margin-left:0;max-width:none}
  .to-top{right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-line .w{opacity:1;transform:none}
  .ck path{stroke-dashoffset:0}
}

/* ───────── unified button style (from screenshot: dark fill, thin teal outline, soft 8px corners)
   Replaces the pill / rounded variants on every text button and pricing CTA. */
.btn,.btn-sm,.btn-hero,.btn-hero-ghost,.btn-primary,.btn-ghost,.btn-gold,.plan-cta,.form .btn,.cookie .btn,
.plan.popular .plan-cta{
  --btn-line:color-mix(in srgb,var(--gold) 75%,transparent);
  background:var(--bg);color:var(--text);border:1px solid var(--btn-line);border-radius:8px;
  font:500 1rem/1.2 var(--font-body);letter-spacing:.01em;text-transform:none;
  padding:12px 20px;box-shadow:none;transform:none}
.btn-sm,.cookie .btn{padding:10px 16px;font-size:.92rem}
.btn-hero,.btn-hero-ghost{padding:16px 30px;font-size:1.02rem}
.btn-gold::after{display:none}
.btn:hover,.plan-cta:hover,.plan.popular .plan-cta:hover{
  background:color-mix(in srgb,var(--gold) 10%,var(--bg));color:var(--text);border-color:var(--gold);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 25%,transparent);transform:none}
.btn:focus-visible,.plan-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}