/*
 * isadrone.com — v2.0 (2026-09-14). Designed by Harbor from the founder's
 * mockup set. One product story: an image per screen, one line per image.
 *
 * Grounds: white for product and geometry, near-black for scenes. One accent.
 * Type: Inter. Display sizes are fluid and large; body is 18px.
 */

:root{
  --ink:#0b0d10; --paper:#ffffff; --mute:#5f6670; --line:#e6e8eb;
  --dark:#0b0d10; --on-dark:#ffffff; --on-dark-mute:rgba(255,255,255,.72);
  --accent:#0a84ff; --accent-press:#0066cc;
  --col:1200px; --gutter:24px; --radius:20px;
  --fs-body:18px; --fs-cap:14px;
  --h1:clamp(44px, 6.4vw, 92px); --h2:clamp(36px, 4.8vw, 64px); --lead:clamp(18px, 1.5vw, 22px);
  --stat:clamp(48px, 6vw, 84px);
}
@media (min-width:768px){:root{--gutter:48px}}
@media (min-width:1280px){:root{--gutter:80px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
img,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
h1{font-size:var(--h1);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h2{font-size:var(--h2);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lead{font-size:var(--lead);line-height:1.4;max-width:34ch}
.say{font-size:var(--lead);line-height:1.45;color:var(--mute);max-width:40ch}
.on-dark .say{color:var(--on-dark-mute)}
.cap{font-size:var(--fs-cap);line-height:1.45;color:var(--mute)}
.on-dark .cap{color:var(--on-dark-mute)}
.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;font:inherit;font-size:17px;font-weight:600;
  text-decoration:none;letter-spacing:-.01em;transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--accent-press)}
.btn:active{transform:translateY(1px)}
.btn--sm{height:40px;padding:0 20px;font-size:15px}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35)}
.btn--ghost:hover{background:rgba(255,255,255,.24)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:#eaeaea}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* Sticky bar */
.mark{font-weight:700;letter-spacing:.22em;font-size:15px;text-decoration:none;color:#fff}
.mark--sm{font-size:13px;color:var(--on-dark)}
.bar{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;transition:background .25s ease,box-shadow .25s ease;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.bar__in{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter);height:100%;display:flex;align-items:center;justify-content:space-between}
.bar .btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.bar .btn:hover{background:rgba(255,255,255,.28)}
.bar--solid{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.bar--solid .mark{color:var(--ink)}
.bar--solid .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.bar--solid .btn:hover{background:#222}

/* Full-bleed scene: one image, one line */
.scene{position:relative;isolation:isolate;overflow:hidden;min-height:86vh;display:flex;align-items:flex-end;color:var(--on-dark)}
.scene picture,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%)}
.scene__in{position:relative;width:100%;max-width:var(--col);margin-inline:auto;padding:0 var(--gutter) clamp(40px,6vw,88px)}
.scene__copy{max-width:640px;display:flex;flex-direction:column;gap:18px}
.scene--top{align-items:flex-start}
.scene--top::after{background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 75%)}
.scene--top .scene__in{padding-top:clamp(104px,14vh,160px)}
.preview{position:absolute;right:var(--gutter);bottom:18px;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.7)}

/* Hero */
.hero{min-height:100svh}
.hero img{object-position:50% 78%}
.hero .scene__copy{max-width:860px;gap:22px}
.scene__copy--center{margin-inline:auto;align-items:center;text-align:center}
.scene__copy--center .lead{margin-inline:auto}
.hero h1{font-size:clamp(40px, 5.2vw, 72px)}
.hero .lead{font-size:clamp(17px,1.4vw,20px)}
.hero h1 span{display:block;color:rgba(255,255,255,.82)}
.hero .lead{color:rgba(255,255,255,.9);max-width:36ch}
@media (max-width:767px){
  /* Phone: copy on white above the picture, the picture whole and uncropped. */
  .hero{min-height:0;display:block;background:var(--paper);color:var(--ink);padding-top:64px}
  .hero::after{display:none}
  .hero picture,.hero img{position:static;height:auto;width:100%;object-fit:contain;z-index:auto}
  .hero .scene__in{padding:36px var(--gutter) 28px}
  .hero .scene__copy{align-items:flex-start;text-align:left}
  .hero .scene__copy--center .lead{margin-inline:0}
  .hero h1{font-size:clamp(38px,11vw,46px)}
  .hero h1 span{color:var(--mute)}
  .hero .lead{color:var(--mute);max-width:none}
  .hero .btn--white{background:var(--accent);color:#fff}
  .hero .btn--ghost{background:#f2f3f5;color:var(--ink);border-color:transparent;backdrop-filter:none}
  .hero .preview{color:var(--mute);position:static;display:block;text-align:right;padding:8px var(--gutter) 0}
  .btn-row .btn{width:100%}
  .bar{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
  .bar .mark{color:var(--ink)}
  .bar .btn{background:var(--ink);color:#fff;border-color:var(--ink);backdrop-filter:none}
}

/* Numbers band */
.stats{background:var(--paper);padding:clamp(56px,7vw,104px) 0}
.stats__row{display:grid;gap:36px 24px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.stats__row{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-size:var(--stat);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat b small{font-size:.42em;font-weight:600;letter-spacing:-.02em;margin-left:.12em}
.stat span{display:block;margin-top:10px;color:var(--mute);font-size:16px;line-height:1.35;max-width:22ch}

/* Product screens on white */
.product{padding:clamp(72px,9vw,140px) 0;background:var(--paper)}
.product--dark{background:var(--dark);color:var(--on-dark)}
.product__in{display:grid;gap:40px;align-items:center}
@media (min-width:1024px){
  .product__in{grid-template-columns:5fr 7fr;gap:64px}
  .product--flip .product__in{grid-template-columns:7fr 5fr}
  .product--flip .product__copy{order:2}
  .product--flip .product__media{order:1}
}
.product__copy{display:flex;flex-direction:column;gap:20px;max-width:520px}
.product__media img{width:100%;border-radius:var(--radius)}
.product--dark .product__media img{box-shadow:0 30px 80px rgba(0,0,0,.5)}
.product__media--plain img{border-radius:0}
.specs{display:grid;gap:14px;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.product--dark .specs{border-top-color:rgba(255,255,255,.18)}
.specs div{display:grid;grid-template-columns:150px 1fr;gap:16px;font-size:16px;line-height:1.4}
.specs dt{font-weight:600}
.specs dd{margin:0;color:var(--mute)}
.product--dark .specs dd{color:var(--on-dark-mute)}
@media (max-width:480px){.specs div{grid-template-columns:1fr;gap:4px}}

/* Centered statement + image below */
.feature{padding:clamp(72px,9vw,140px) 0 0;text-align:center;background:var(--paper)}
.feature--dark{background:var(--dark);color:var(--on-dark)}
.feature__copy{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center;padding-inline:var(--gutter)}
.feature__media{margin-top:clamp(40px,5vw,72px)}
.feature__media img{width:100%}
.feature--dark .feature__media{padding-bottom:0}

/* App */
.device{margin:clamp(40px,5vw,72px) auto 0;max-width:820px;padding:0 var(--gutter)}
.device__frame{background:#111318;border-radius:28px;padding:14px;box-shadow:0 40px 100px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.device__frame img{width:100%;border-radius:18px}

/* Two images side by side */
.pair{display:grid;gap:16px;margin-top:clamp(40px,5vw,72px)}
@media (min-width:768px){.pair{grid-template-columns:1fr 1fr}}
.pair img{width:100%;border-radius:var(--radius)}

/* Accessory row */
.acc{padding:clamp(56px,7vw,104px) 0;background:var(--paper)}
.acc__grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin-top:36px}
@media (min-width:768px){.acc__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.acc__grid{grid-template-columns:repeat(6,1fr)}}
.acc__item{background:#f4f5f7;border-radius:16px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.acc__item .ph{height:120px;display:flex;align-items:center;justify-content:center;width:100%}
.acc__item img{max-height:120px;width:auto;max-width:100%;mix-blend-mode:multiply}
.acc__item h3{font-size:16px}
.acc__item p{font-size:14px;color:var(--mute);line-height:1.35}

/* Reserve */
.reserve{background:var(--paper);padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line)}
.reserve__in{max-width:680px;display:flex;flex-direction:column;gap:18px}
.rform{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.rform__row{display:flex;flex-direction:column;gap:12px}
@media (min-width:520px){.rform__row{flex-direction:row}}
.rform input[type=email]{
  flex:1;height:56px;border-radius:999px;border:1px solid #c9ccd1;background:#fff;color:var(--ink);
  padding:0 22px;font:inherit;font-size:17px;
}
.rform input[type=email]::placeholder{color:#8a9099}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.res__status{font-size:var(--fs-body);color:var(--ink);font-weight:600}
.res__status--bad{color:#b3261e}
.fineprint{font-size:13px;color:var(--mute)}

/* Footer */
.foot{background:var(--dark);color:var(--on-dark-mute);padding:40px 0}
.foot__in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:14px}
.foot a{color:var(--on-dark)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}