/* Triton Pools Visualizer
   Palette: Abyss #071E33 · Ocean #0E3A5C · Tide Aqua #2EC4D6 · Foam #EAF6F9 · Travertine #D9C7A7 */
:root{
  --abyss:#071E33;
  --ocean:#0E3A5C;
  --ocean-2:#0A2C47;
  --aqua:#2EC4D6;
  --aqua-deep:#18A5B8;
  --foam:#EAF6F9;
  --trav:#D9C7A7;
  --ink:#0B2233;
  --radius:14px;
  --shadow:0 10px 30px rgba(4,18,32,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--abyss);color:var(--foam);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.step-tag,.eyebrow{font-family:'Archivo',sans-serif}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(7,30,51,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(46,196,214,.18)}
.topbar-inner{max-width:1040px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.brand img{height:44px;width:auto}
.brand-text{font-family:'Archivo';font-weight:800;letter-spacing:.12em;font-size:18px}
.brand-text em{font-style:normal;color:var(--aqua)}
.topbar-cta{color:var(--aqua);font-weight:700;text-decoration:none;font-size:15px;letter-spacing:.02em}
.topbar-cta:hover{color:var(--foam)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#071E33 0%,#0A2C47 55%,#0E3A5C 100%);text-align:center;padding:84px 20px 120px}
.caustics{position:absolute;inset:0;opacity:.35;background:
  radial-gradient(ellipse 60% 40% at 20% 30%, rgba(46,196,214,.25), transparent 60%),
  radial-gradient(ellipse 50% 35% at 80% 20%, rgba(46,196,214,.18), transparent 60%),
  radial-gradient(ellipse 70% 45% at 50% 80%, rgba(24,165,184,.22), transparent 65%);
  animation:causticDrift 14s ease-in-out infinite alternate}
@keyframes causticDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.06)}}
.hero-inner{position:relative;max-width:760px;margin:0 auto}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--trav);margin-bottom:18px}
.hero h1{font-weight:800;font-size:clamp(38px,7vw,64px);line-height:1.02;letter-spacing:.01em}
.hero h1 span{color:var(--aqua)}
.hero-sub{margin:20px auto 30px;max-width:560px;font-size:17px;color:rgba(234,246,249,.85)}
.hero-note{margin-top:14px;font-size:13px;color:rgba(234,246,249,.55)}
.waterline{position:absolute;left:0;right:0;bottom:-2px;height:70px;background:var(--abyss);clip-path:polygon(0 60%,4% 55%,9% 62%,15% 52%,22% 60%,30% 50%,38% 61%,46% 53%,54% 62%,62% 52%,70% 60%,78% 51%,86% 61%,93% 54%,100% 60%,100% 100%,0 100%)}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:none;border-radius:999px;padding:15px 32px;font-size:16px;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-align:center}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--aqua);color:var(--abyss);box-shadow:0 6px 22px rgba(46,196,214,.35)}
.btn-primary:hover{background:#4bd3e3}
.btn-ghost{background:transparent;color:var(--foam);border:1.5px solid rgba(234,246,249,.35)}
.btn-ghost:hover{border-color:var(--aqua);color:var(--aqua)}

/* ---------- studio / steps ---------- */
.studio{max-width:860px;margin:0 auto;padding:56px 20px 80px}
.step{margin-bottom:64px}
.step-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;border-bottom:1px solid rgba(46,196,214,.2);padding-bottom:12px}
.step-tag{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua)}
.step-head h2{font-weight:800;font-size:clamp(22px,3.4vw,30px);letter-spacing:.02em;text-transform:uppercase}

/* ---------- dropzone ---------- */
.dropzone{position:relative;border:2px dashed rgba(46,196,214,.45);border-radius:var(--radius);background:rgba(14,58,92,.35);min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s,background .15s;cursor:pointer}
.dropzone.dragover{border-color:var(--aqua);background:rgba(46,196,214,.12)}
.dz-empty{text-align:center;color:rgba(234,246,249,.85);padding:36px}
.dz-empty svg{margin:0 auto 12px;color:var(--aqua)}
.dz-hint{font-size:13px;color:rgba(234,246,249,.5);margin-top:6px}
#dzPreview{width:100%;height:auto;max-height:440px;object-fit:cover}
.dz-change{position:absolute;bottom:12px;right:12px;background:rgba(7,30,51,.85);color:var(--foam);border:1px solid rgba(46,196,214,.5);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600}
.dz-change:hover{background:var(--ocean)}

/* ---------- option pills ---------- */
.opt-group{margin-bottom:34px}
.opt-group h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--trav);margin-bottom:12px}
.opt-group h3 small{color:rgba(234,246,249,.45);font-weight:600;letter-spacing:.06em;text-transform:none}
.opt-note{font-size:13px;color:rgba(234,246,249,.6);margin:-6px 0 12px}
.pill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pill{background:rgba(14,58,92,.45);border:1.5px solid rgba(46,196,214,.22);border-radius:12px;padding:13px 14px;text-align:left;color:var(--foam);transition:border-color .12s,background .12s,transform .12s;display:flex;flex-direction:column;gap:2px}
.pill:hover{border-color:rgba(46,196,214,.6)}
.pill strong{font-size:14.5px;font-weight:700}
.pill span{font-size:12px;color:rgba(234,246,249,.55)}
.pill.selected{background:rgba(46,196,214,.16);border-color:var(--aqua);box-shadow:0 0 0 1px var(--aqua) inset}
.pill.selected strong{color:var(--aqua)}
.swatch-grid .pill{flex-direction:row;align-items:center;gap:10px}
.swatch{width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2));box-shadow:inset 0 -2px 5px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4)}

/* ---------- placement ---------- */
.placement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px}
.place{background:rgba(14,58,92,.45);border:1.5px solid rgba(46,196,214,.22);border-radius:12px;padding:14px 10px;color:var(--foam);display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .12s,background .12s}
.place:hover{border-color:rgba(46,196,214,.6)}
.place.selected{background:rgba(46,196,214,.16);border-color:var(--aqua);box-shadow:0 0 0 1px var(--aqua) inset}
.place strong{font-size:14px;font-weight:700}
.place.selected strong{color:var(--aqua)}
.yard{display:block;width:84px;height:52px;border-radius:8px;background:rgba(234,246,249,.1);border:1px solid rgba(234,246,249,.25);position:relative}
.pool-dot{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:32px;border-radius:8px;background:radial-gradient(circle at 35% 30%,#2ec4d6,#1173b4)}
.pool-dot.left{left:7px}
.pool-dot.center{left:50%;transform:translate(-50%,-50%)}
.pool-dot.right{right:7px}

/* ---------- contact ---------- */
.contact-card{background:rgba(14,58,92,.4);border:1px solid rgba(46,196,214,.22);border-radius:var(--radius);padding:26px;max-width:520px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--trav);margin-bottom:6px}
.field label small{color:rgba(234,246,249,.4);text-transform:none;letter-spacing:0}
.field input{width:100%;background:rgba(7,30,51,.7);border:1.5px solid rgba(46,196,214,.3);border-radius:10px;padding:13px 14px;font-size:16px;color:var(--foam);outline:none;transition:border-color .12s}
.field input:focus{border-color:var(--aqua)}
.field input::placeholder{color:rgba(234,246,249,.3)}
.quota-note{font-size:13px;color:rgba(234,246,249,.6);margin-bottom:14px}
.btn-generate{width:100%;font-size:17px;padding:17px}
.error{margin-top:12px;color:#ff9e9e;font-size:14px;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);border-radius:10px;padding:10px 14px}

/* ---------- before/after ---------- */
.ba-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);user-select:none;touch-action:none}
.ba-after{width:100%;display:block}
.ba-before-clip{position:absolute;inset:0;overflow:hidden;width:50%}
.ba-before{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--aqua);transform:translateX(-50%);cursor:ew-resize}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--aqua);box-shadow:0 4px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.ba-handle span::before{content:'⇔';color:var(--abyss);font-size:18px;font-weight:800}
.ba-label{position:absolute;top:12px;font-size:11px;font-weight:800;letter-spacing:.14em;background:rgba(7,30,51,.8);padding:5px 10px;border-radius:6px}
.ba-label-l{left:12px}
.ba-label-r{right:12px;color:var(--aqua)}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.remaining-note{margin-top:12px;font-size:13px;color:rgba(234,246,249,.55)}

/* ---------- crosspromo + final cta ---------- */
.crosspromo{margin-top:36px;background:rgba(217,199,167,.08);border:1px solid rgba(217,199,167,.3);border-radius:var(--radius);padding:24px}
.crosspromo h3{font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--trav);margin-bottom:8px}
.crosspromo p{font-size:14.5px;color:rgba(234,246,249,.8);margin-bottom:14px}
.cta-final{margin-top:24px;background:linear-gradient(135deg,rgba(46,196,214,.15),rgba(14,58,92,.5));border:1px solid rgba(46,196,214,.35);border-radius:var(--radius);padding:28px;text-align:center}
.cta-final h3{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.cta-final p{font-size:14.5px;color:rgba(234,246,249,.8);margin-bottom:18px;max-width:460px;margin-left:auto;margin-right:auto}
.cta-final .btn{margin:6px}

/* ---------- loading ---------- */
.loading{position:fixed;inset:0;z-index:100;background:rgba(7,30,51,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.loading-card{text-align:center}
.loading-card p{margin-top:26px;font-size:17px;font-weight:600;color:var(--foam)}
.ripple{position:relative;width:90px;height:90px;margin:0 auto}
.ripple i{position:absolute;inset:0;border:3px solid var(--aqua);border-radius:50%;animation:rip 2.1s ease-out infinite;opacity:0}
.ripple i:nth-child(2){animation-delay:.7s}
.ripple i:nth-child(3){animation-delay:1.4s}
@keyframes rip{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1);opacity:0}}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(46,196,214,.18);padding:32px 20px 44px;text-align:center;font-size:13px;color:rgba(234,246,249,.5)}
.foot a{color:var(--aqua);text-decoration:none}
.foot-tiny{margin-top:10px;font-size:11.5px;color:rgba(234,246,249,.35)}

/* ---------- responsive & a11y ---------- */
@media (max-width:560px){
  .hero{padding:56px 16px 100px}
  .studio{padding:40px 14px 60px}
  .placement-grid{max-width:100%}
  .yard{width:70px;height:44px}
  .result-actions .btn{flex:1 1 100%}
}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .caustics,.ripple i{animation:none}
  html{scroll-behavior:auto}
}

[hidden]{display:none!important}