:root{ --paper:#F4F9FB; --ink:#142A33; --sky:#2F8FBF; --sky-dark:#256F98; --teal:#1C6E71; --mist:#D7E8ED; --mistdark:#7C97A0; }
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink);}
::selection{background:var(--sky); color:var(--paper);}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px;}

.eyebrow{ font-family:'Inter',sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--teal); }
.btn-primary{ background:var(--sky); color:#fff; font-weight:700; font-size:.9rem; padding:.9rem 1.6rem; border-radius:6px; transition:transform .15s ease, background .15s ease; display:inline-block; }
.btn-primary:hover{ transform:translateY(-1px); background:var(--sky-dark); }
.btn-secondary{ border:1.5px solid var(--ink); color:var(--ink); font-weight:600; font-size:.9rem; padding:.85rem 1.55rem; border-radius:6px; transition:background .15s ease; display:inline-block; }
.btn-secondary:hover{ background:rgba(20,42,51,.06); }

.draw{ stroke-dasharray:700; stroke-dashoffset:700; animation:draw 1.6s ease forwards; }
.blade{ fill:none; stroke:#B7B37A; stroke-width:1.5; stroke-dasharray:30; stroke-dashoffset:30; animation:draw .7s ease forwards, greenUp .9s ease forwards; }
@keyframes greenUp{ to{ stroke:#3F8F4F; } }
.stem{ stroke-dasharray:24; stroke-dashoffset:24; animation:draw .4s ease forwards; }
.d1{animation-delay:.1s} .d2{animation-delay:.4s} .d3{animation-delay:.7s}
.pop{opacity:0; transform:scale(.6); transform-origin:center; animation:popIn .45s cubic-bezier(.34,1.56,.64,1) forwards;}
.p1{animation-delay:1.3s} .p2{animation-delay:1.6s} .p3{animation-delay:1.9s}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes popIn{ to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .draw{animation:none; stroke-dashoffset:0;} .blade{animation:none; stroke-dashoffset:0; stroke:#3F8F4F;} .stem{animation:none; stroke-dashoffset:0;} .pop{animation:none; opacity:1; transform:scale(1);} }

.card{ border:1px solid var(--mist); border-radius:8px; background:#fff; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card:hover{ border-color:var(--sky); transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,42,51,.06); }

input, select, textarea{ background:#fff; border:1px solid var(--mistdark); border-radius:6px; padding:.75rem .85rem; font-family:'Inter',sans-serif; font-size:.95rem; width:100%; }
input:focus, select:focus, textarea:focus{ border-color:var(--sky); }
label{ font-family:'Inter',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mistdark); }

.step-dot{ width:10px; height:10px; border-radius:50%; background:var(--mist); }
.step-dot.active{ background:var(--sky); }
.step-panel{ display:none; }
.step-panel.active{ display:block; }

.choice-btn{ border:1.5px solid var(--mistdark); border-radius:6px; padding:.9rem 1rem; cursor:pointer; transition:all .15s ease; }
.choice-btn:hover{ border-color:var(--sky); }
.choice-btn.selected{ border-color:var(--sky); background:rgba(47,143,191,.08); }

details summary{ cursor:pointer; list-style:none; }
details summary::-webkit-details-marker{ display:none; }

.lightbox{ position:fixed; inset:0; background:rgba(20,42,51,.85); z-index:60; display:flex; align-items:center; justify-content:center; padding:2rem; }

.page-hero{ background:var(--ink); color:var(--paper); padding:3.5rem 0; position:relative; overflow:hidden; }
nav a.active{ color:var(--sky); border-bottom:2px solid var(--sky); padding-bottom:2px; }

/* Hero grow-in + idle loop animation */
.rise{ opacity:0; transform:translateY(22px) scale(.7); animation:riseUp .9s ease forwards, oscillate 4s ease-in-out infinite; animation-delay:3s, 3.9s; }
@keyframes riseUp{ to{ opacity:1; transform:translateY(0) scale(1) rotate(-30deg); } }
@keyframes oscillate{ 0%,100%{ transform:translateY(0) scale(1) rotate(-30deg); } 50%{ transform:translateY(0) scale(1) rotate(30deg); } }

.spray{ fill:none; stroke:#F4F9FB; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:6 8; animation:flow .5s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-56; } }

@media (prefers-reduced-motion: reduce){
  .rise{ animation:none; opacity:1; transform:translateY(0) scale(1) rotate(-30deg); }
  .spray{ animation:none; stroke-dashoffset:0; }
}
.sidebar-link{ padding:.65rem .9rem; border-radius:8px; color:rgba(244,249,251,.65); font-weight:600; transition:background .15s ease, color .15s ease; }
.sidebar-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar-link.active{ background:var(--sky); color:#fff; }

/* Drag-to-compare before/after slider */
.compare-slider{ position:relative; height:300px; border-radius:8px; overflow:hidden; --pos:50%; }
.compare-before, .compare-after{ position:absolute; inset:0; }
.compare-after{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 8px rgba(255,255,255,.25); }
.compare-handle::after{ content:'\2194'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:var(--ink); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.compare-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; -webkit-appearance:none; }
.compare-label{ position:absolute; top:12px; background:rgba(20,42,51,.7); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .6rem; border-radius:4px; pointer-events:none; }
.compare-label-before{ left:12px; }
.compare-label-after{ right:12px; }