/* ==========================================================================
   watermarkthat.com — styles
   Self-contained. Vanilla CSS, mobile-first. Co-branded with Scale Rebel Studio
   (gold on dark). Flat hyphenated class names, no BEM, no frameworks.
   ========================================================================== */

/* Self-hosted Inter — copy the 4 .woff2 files into /fonts/ (see README).
   System fallback below keeps the site looking right until they're present. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Inter-Bold.woff2') format('woff2')}

:root{
  --soft-black:#141414;
  --charcoal:#1E1E1E;
  --deep-950:#151D1B;
  --deep-900:#1A2725;
  --deep-850:#1F302D;
  --deep-800:#243936;

  --gold:#C4A962;
  --gold-muted:rgba(196,169,98,.18);
  --oxide:#8B4D3B;
  --oxide-light:#A66B5A;
  --bone-white:#FAFAF8;

  --text-strong:rgba(250,250,248,.98);
  --text-body:rgba(250,250,248,.86);
  --text-muted:rgba(250,250,248,.62);

  --maxw:1100px;
  --radius:10px;
  --border:1px solid rgba(196,169,98,.14);
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --shadow-soft:0 12px 32px rgba(0,0,0,.22);

  --ease:cubic-bezier(.25,.8,.25,1);
  --dur:200ms;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* ---------- reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  color:var(--text-body);
  background:var(--soft-black);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(196,169,98,.10), transparent),
    radial-gradient(760px 620px at -10% 110%, rgba(139,77,59,.10), transparent);
  background-attachment:fixed;
  min-height:100vh;
}

h1,h2,h3{color:var(--text-strong);line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2rem,5.2vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}
h3{font-size:1.15rem}
p{max-width:64ch}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.container{width:min(var(--maxw),calc(100% - 2.5rem));margin-inline:auto}
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-tight{padding:clamp(2rem,4vw,3rem) 0}

.kicker{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;color:var(--gold);font-weight:500;margin-bottom:.85rem;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--text-body);max-width:60ch;line-height:1.65}

/* ---------- buttons ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1;
  padding:.85rem 1.4rem;border-radius:8px;cursor:pointer;
  border:1px solid rgba(196,169,98,.4);
  background:transparent;color:var(--text-strong);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.button:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-1px)}
.button--primary{
  background:var(--gold);border-color:var(--gold);color:var(--soft-black);
}
.button--primary:hover{background:#d4ba74;border-color:#d4ba74}
.button:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,20,20,.78);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(196,169,98,.12);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:62px}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--text-strong);font-weight:700;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand svg{width:26px;height:26px;flex:0 0 auto}
.brand-name{font-size:1rem}
.brand-name em{color:var(--gold);font-style:normal}

.nav{display:flex;align-items:center;gap:.4rem}
.nav-link{
  color:var(--text-muted);font-size:.92rem;font-weight:500;
  padding:.5rem .7rem;border-radius:7px;
}
.nav-link:hover{color:var(--text-strong);text-decoration:none}
.nav .button{padding:.6rem 1.05rem;font-size:.9rem}

/* mobile nav */
.nav-toggle{display:none;background:transparent;border:1px solid rgba(196,169,98,.25);border-radius:8px;padding:.5rem .6rem;cursor:pointer}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block;width:18px;height:2px;background:var(--gold);border-radius:2px;position:relative;
}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}

@media (max-width:720px){
  .nav-toggle{display:inline-flex;align-items:center}
  .nav{
    position:absolute;top:62px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:rgba(20,20,20,.98);
    border-bottom:1px solid rgba(196,169,98,.14);
    padding:.6rem 1.25rem 1rem;
  }
  .nav:not(.is-open){display:none}
  .nav-link{padding:.7rem .4rem}
  .nav .button{margin-top:.4rem}
}

/* ---------- hero ---------- */
.hero{padding:clamp(3.25rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.hero h1 em{color:var(--gold);font-style:normal}
.hero .lede{margin-top:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.hero-note{margin-top:1.1rem;font-size:.82rem;color:var(--text-muted);display:flex;align-items:center;gap:.45rem}
.dot{width:7px;height:7px;border-radius:50%;background:#6fae5a;flex:0 0 auto}

/* ---------- how it works ---------- */
.section-head{max-width:60ch;margin-bottom:2.25rem}
.steps{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.step{
  background:var(--deep-900);border:var(--border);border-radius:var(--radius);
  padding:1.5rem 1.4rem;
}
.step-num{
  font-family:var(--mono);font-size:.8rem;color:var(--soft-black);font-weight:700;
  background:var(--gold);width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:.9rem;
}
.step h3{margin-bottom:.4rem}
.step p{color:var(--text-muted);font-size:.95rem}

/* ---------- features / trust ---------- */
.features{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.5rem}
@media (min-width:680px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{padding:1.2rem 1.25rem;border-left:2px solid var(--gold);background:rgba(196,169,98,.04);border-radius:0 8px 8px 0}
.feature h3{font-size:1rem;margin-bottom:.3rem}
.feature p{color:var(--text-muted);font-size:.9rem}

/* ---------- FAQ (native details/summary — no JS, accessible) ---------- */
.faq{max-width:760px;margin-top:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:var(--deep-900);border:var(--border);border-radius:var(--radius);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.05rem 1.25rem;
  font-weight:600;color:var(--text-strong);display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;transition:transform var(--dur) var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.25rem 1.15rem;color:var(--text-muted);font-size:.95rem}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--deep-850),var(--deep-950));
  border:var(--border);border-radius:14px;padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
}
.cta-band h2{margin-bottom:.35rem}
.cta-band p{color:var(--text-muted);max-width:52ch}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(196,169,98,.12);padding:2.25rem 0;margin-top:1rem}
.site-footer .container{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.footer-credit{color:var(--text-muted);font-size:.9rem}
.footer-credit strong{color:var(--text-body);font-weight:600}
.footer-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-links a{color:var(--text-muted);font-size:.88rem}
.footer-links a:hover{color:var(--gold)}

/* ---------- utilities ---------- */
.u-hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-nav{background:rgba(20,20,20,.96);border-bottom:1px solid rgba(196,169,98,.12);padding:.85rem 0;text-align:center}
.noscript-nav a{display:inline-block;padding:.4rem .75rem;color:var(--text-muted)}

/* ==========================================================================
   Watermark tool  (/tool)
   Namespaced wm- to keep it self-contained.
   ========================================================================== */
.wm-wrap{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:start}
@media(min-width:861px){.wm-wrap{grid-template-columns:320px 1fr;gap:2.5rem}}

.wm-controls{display:flex;flex-direction:column;gap:1.4rem}
@media(min-width:861px){.wm-controls{padding-right:2.25rem;border-right:1px solid rgba(196,169,98,.12)}}

.wm-stage{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

.wm-group{display:flex;flex-direction:column;gap:.55rem}
.wm-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:500;color:var(--text-muted)}
.wm-val{color:var(--gold)}

.wm-input{
  background:var(--deep-900);border:1px solid rgba(196,169,98,.16);color:var(--text-body);
  font-family:inherit;font-size:.95rem;padding:.7rem .8rem;border-radius:8px;outline:none;
  transition:border-color var(--dur) var(--ease);
}
.wm-input:focus{border-color:var(--gold)}
.wm-input::placeholder{color:var(--text-muted)}

.wm-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:rgba(196,169,98,.18);border-radius:4px;outline:none}
.wm-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--soft-black);box-shadow:0 0 0 1px var(--gold)}
.wm-range::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--soft-black);box-shadow:0 0 0 1px var(--gold)}

.wm-seg{display:flex;background:var(--deep-900);border:1px solid rgba(196,169,98,.16);border-radius:8px;padding:3px}
.wm-seg button{flex:1;background:transparent;border:none;color:var(--text-muted);font-family:inherit;font-size:.78rem;padding:.5rem .4rem;border-radius:6px;cursor:pointer;letter-spacing:.03em;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.wm-seg button:hover{color:var(--text-body)}
.wm-seg button.wm-active{background:var(--gold);color:var(--soft-black);font-weight:600}
.wm-seg-color button{font-weight:700}

.wm-drop{border:1.5px dashed rgba(196,169,98,.24);border-radius:var(--radius);padding:2.5rem 1.25rem;text-align:center;cursor:pointer;background:var(--deep-900);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.wm-drop:hover,.wm-drop:focus-visible,.wm-drop.wm-drag{border-color:var(--gold);background:var(--deep-850);outline:none}
.wm-drop-ico{font-size:1.6rem;margin-bottom:.5rem;color:var(--gold)}
.wm-drop-big{font-weight:700;font-size:1.05rem;color:var(--text-strong)}
.wm-drop-sm{color:var(--text-muted);font-size:.8rem;margin-top:.4rem}

.wm-count{font-size:.8rem;color:var(--text-muted)}
.wm-count b{color:var(--text-body)}
.wm-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem}
.wm-thumb{position:relative;border:1px solid rgba(196,169,98,.16);border-radius:9px;overflow:hidden;cursor:pointer;background:var(--deep-900);aspect-ratio:1;transition:border-color var(--dur) var(--ease)}
.wm-thumb.wm-sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.wm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wm-thumb-x{position:absolute;top:5px;right:5px;width:22px;height:22px;background:rgba(20,20,20,.85);border:1px solid rgba(196,169,98,.2);color:var(--text-body);border-radius:6px;font-size:.85rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.wm-thumb-x:hover{background:var(--gold);color:var(--soft-black)}

.wm-preview-box{
  background:var(--charcoal);border:1px solid rgba(196,169,98,.12);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;padding:1.4rem;min-height:320px;position:relative;overflow:hidden;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;
}
.wm-canvas{max-width:100%;max-height:60vh;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.wm-empty-msg{color:var(--text-muted);font-size:.85rem;text-align:center}

.wm-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.wm-action-btn{flex:1;min-width:150px}

.wm-privacy{font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.45rem}
.wm-tiled-controls{display:flex;flex-direction:column;gap:1.4rem}