/* GoDrona website — theme taken from the GoDrona product designs */
:root{
  color-scheme: dark;
  --ink:#021722; --deep:#041C28; --panel:#072A3A; --panel-2:#0B3447; --rule:#103848; --rule-2:#1A4D60;
  --text:#E6F1F5; --mute:#8FB0BF; --dim:#5E8597;
  --or:#F05A22; --or-2:#F7931E; --grad:linear-gradient(90deg,#F05A22,#F7931E);
  --cyan:#00A8F0; --teal:#28C8B8; --purple:#B04DFF; --green:#2FD07A; --yellow:#FFC23D; --orange-z:#FF8A3D; --red:#FF5C5C;
  --font:"Rubik", "Segoe UI", system-ui, sans-serif;
  --wrap:min(1220px, 100% - 44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0; background:var(--ink); color:var(--text); font:400 17px/1.65 var(--font); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
img,svg,canvas{max-width:100%; display:block}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}
.wrap{width:var(--wrap); margin-inline:auto}
.skip{position:absolute; left:-999px; top:8px; background:var(--or); color:#fff; padding:8px 14px; z-index:100}
.skip:focus{left:8px}
h1,h2,h3{font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance}
.o{color:var(--or-2)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:46px; padding:0 22px; border-radius:8px; font:600 15px/1 var(--font); text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap; color:var(--text); background:none; transition:filter .15s, border-color .15s, color .15s}
.btn-p{background:var(--grad); color:#fff; box-shadow:0 10px 30px -12px rgba(240,90,34,.75)}
.btn-p:hover{filter:brightness(1.08)}
.btn-l{border-color:var(--rule-2)}
.btn-l:hover{border-color:var(--cyan); color:var(--cyan)}
.btn-q{color:var(--mute); padding:0 10px}
.btn-q:hover{color:var(--text)}
.btn svg{width:16px; height:16px}

/* ---------- Header ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(4,28,40,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--rule)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:51; background:rgba(4,28,40,.86); backdrop-filter:blur(14px)}
.nav .wrap{display:flex; align-items:center; gap:22px; height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; font-size:21px}
.brand img{width:44px; height:44px}
.menu{display:flex; gap:4px; margin-left:8px; list-style:none; padding:0}
.menu > li{position:relative}
.menu a,.menu button{display:block; white-space:nowrap; padding:10px 11px; color:var(--mute); text-decoration:none; font:500 15px var(--font); background:none; border:0; cursor:pointer; border-radius:6px}
.menu a:hover,.menu button:hover,.menu a[aria-current="page"],.menu button.cur{color:var(--text)}
.menu a[aria-current="page"]::after,.menu button.cur::after{content:""; display:block; height:2px; background:var(--grad); margin-top:4px; border-radius:2px}
.dd{position:absolute; top:100%; left:-10px; min-width:330px; background:var(--panel); border:1px solid var(--rule-2); border-radius:12px; padding:8px; display:none; box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.dd.open{display:grid}
.dd a{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; padding:10px; color:var(--text)}
.dd a:hover{background:var(--panel-2)}
.dd a span{display:block; color:var(--mute); font-size:13px; font-weight:400}
.dd i{width:36px; height:36px; border-radius:9px; display:grid; place-items:center}
.dd i svg{width:19px; height:19px}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--rule-2); color:var(--text); border-radius:8px; height:42px; padding:0 14px; font:500 15px var(--font)}
@media (max-width: 1320px){ .nav-right .btn-q{display:none} }
@media (max-width: 1080px){
  .menu,.nav-right{display:none}
  .menu-btn{display:block}
  .nav.open .wrap{flex-wrap:wrap; height:auto; padding:14px 0}
  .nav.open .menu{display:flex; flex-direction:column; width:100%; order:3; margin:0}
  .nav.open .dd{position:static; display:grid; box-shadow:none; min-width:0; background:var(--deep); margin:4px 0 8px}
  .nav.open .nav-right{display:flex; order:4; width:100%; flex-wrap:wrap; margin:6px 0 4px}
}

/* ---------- Page hero (inner pages) ---------- */
.phero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule); background:radial-gradient(900px 500px at 85% 20%, rgba(0,168,240,.12), transparent 60%), var(--deep)}
.phero .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:center; padding:70px 0 76px}
.kicker{display:inline-flex; align-items:center; gap:8px; color:var(--or-2); font-weight:600; font-size:14px; margin-bottom:16px}
.kicker::before{content:""; width:22px; height:2px; background:var(--grad)}
.phero h1{font-size:clamp(36px, 4.6vw, 60px); line-height:1.05; margin-bottom:20px}
.phero p.lede{color:var(--mute); font-size:19px; margin:0 0 28px; max-width:34rem}
.ctas{display:flex; gap:12px; flex-wrap:wrap}
.stage{position:relative; aspect-ratio:16/11; border-radius:16px; border:1px solid var(--rule-2); background:#01121B; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%}
.stage .hud{position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none}
.stage .hud span{background:rgba(2,23,34,.82); border:1px solid var(--rule-2); border-radius:7px; padding:6px 10px; font-size:13px; color:var(--mute)}
.stage .hud b{color:var(--text); font-weight:600; margin-left:4px}
.stage .tag{position:absolute; top:12px; left:12px; background:rgba(2,23,34,.82); border:1px solid var(--rule-2); border-radius:7px; padding:5px 10px; font-size:12px; color:var(--mute); display:flex; align-items:center; gap:7px}
.stage .tag i{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(255,92,92,.7); animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,92,92,0)}100%{box-shadow:0 0 0 0 rgba(255,92,92,0)}}
@media (max-width: 960px){ .phero .wrap{grid-template-columns:1fr; padding:44px 0 50px} }

/* ---------- Home hero ---------- */
.hero{position:relative; min-height:calc(100svh - 72px); display:grid; overflow:hidden; border-bottom:1px solid var(--rule)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero .shade{position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 0%, rgba(2,23,34,.9) 32%, rgba(2,23,34,0) 62%); pointer-events:none}
.hero > .wrap{position:relative; align-self:center; padding:40px 0 150px}
.hero h1{font-size:clamp(44px, 6.2vw, 86px); line-height:1; max-width:12ch; margin-bottom:22px; font-weight:700}
.hero p.lede{color:var(--mute); font-size:clamp(17px, 1.5vw, 20px); max-width:33rem; margin:0 0 32px}
.hero .ctas .btn{height:52px; padding:0 26px; font-size:16px}
.tlm{position:absolute; left:0; right:0; bottom:0; border-top:1px solid var(--rule); background:rgba(4,28,40,.88); backdrop-filter:blur(8px)}
.tlm .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding:0}
.tlm .c{padding:14px 18px; border-left:1px solid var(--rule)}
.tlm .c:first-child{border-left:0; padding-left:0}
.tlm .c b{display:flex; align-items:center; gap:8px; font-weight:600}
.tlm .c b i{width:9px; height:9px; border-radius:50%}
.tlm .c span{display:block; color:var(--mute); font-size:13px}
@media (max-width: 900px){
  .hero{min-height:0}
  .hero .shade{background:linear-gradient(180deg, var(--ink) 0%, rgba(2,23,34,.85) calc(100% - 440px), rgba(2,23,34,0) calc(100% - 330px))}
  .hero > .wrap{align-self:start; padding:36px 0 420px}
  .tlm .wrap{grid-template-columns:1fr 1fr} .tlm .c:nth-child(n+3){display:none}
}

/* ---------- Sections ---------- */
section.s{padding:104px 0}
section.alt{background:var(--deep); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.sh{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:40px; align-items:end; margin-bottom:48px}
.sh h2{font-size:clamp(30px, 3.6vw, 46px); line-height:1.08}
.sh p{color:var(--mute); margin:0; font-size:18px}
@media (max-width: 900px){ section.s{padding:72px 0} .sh{grid-template-columns:1fr; gap:14px; margin-bottom:32px} }

/* Use-case grid on home */
.uses{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.use{position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--text); border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--deep); transition:border-color .2s, transform .2s}
.use:hover{border-color:var(--c); transform:translateY(-3px)}
.use canvas{width:100%; aspect-ratio:16/9; background:#01121B; border-bottom:1px solid var(--rule)}
.use div{padding:18px 20px 22px}
.use h3{font-size:21px; margin-bottom:6px; display:flex; align-items:center; gap:10px}
.use h3::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--c)}
.use p{margin:0; color:var(--mute); font-size:15px}
.use .more{margin-top:12px; color:var(--c); font-weight:600; font-size:14px}
@media (max-width: 1000px){ .uses{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .uses{grid-template-columns:1fr} }

/* Feature list with icons */
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule)}
.feat{padding:28px 28px 28px 0; border-bottom:1px solid var(--rule)}
.feat:not(:nth-child(3n+1)){padding-left:28px; border-left:1px solid var(--rule)}
.feat i{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px; color:#fff}
.feat i svg{width:22px; height:22px}
.feat h3{font-size:19px; margin-bottom:6px}
.feat p{margin:0; color:var(--mute); font-size:15px}
@media (max-width: 900px){ .feats{grid-template-columns:1fr} .feat:not(:nth-child(3n+1)){padding-left:0; border-left:0} .feat{padding-right:0} }

/* Split rows */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center}
.split + .split{margin-top:96px}
.split.flip > :first-child{order:2}
.split h3{font-size:clamp(26px, 2.6vw, 34px); line-height:1.12; margin-bottom:14px}
.split p{color:var(--mute)}
.ticks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.ticks li{padding-left:30px; position:relative}
.ticks li::before{content:""; position:absolute; left:0; top:.3em; width:18px; height:18px; border-radius:50%; background:rgba(47,208,122,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4 7.7 12 13 6.4' fill='none' stroke='%232FD07A' stroke-width='2'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width: 900px){ .split{grid-template-columns:1fr; gap:28px} .split.flip > :first-child{order:0} .split + .split{margin-top:64px} }

/* Numbered workflow (true sequence) */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:f; position:relative}
.flow::before{content:""; position:absolute; top:23px; left:23px; right:10%; height:2px; background:linear-gradient(90deg,var(--or),var(--cyan))}
.flow li{list-style:none; padding-right:20px; position:relative}
.flow li::before{counter-increment:f; content:counter(f); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--deep); border:2px solid var(--or); font-weight:700; margin-bottom:16px; position:relative}
.flow b{display:block; font-size:18px; margin-bottom:4px}
.flow span{color:var(--mute); font-size:15px}
.flow{padding:0; margin:0}
@media (max-width: 900px){ .flow{grid-template-columns:1fr; gap:22px} .flow::before{display:none} .flow li{display:grid; grid-template-columns:48px 1fr; gap:4px 16px} .flow li::before{grid-row:span 2; margin:0} }

/* Stats band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--deep)}
.stats div{padding:24px; border-left:1px solid var(--rule)}
.stats div:first-child{border-left:0}
.stats b{display:block; font-size:30px; font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats span{color:var(--mute); font-size:14px}
@media (max-width: 800px){ .stats{grid-template-columns:1fr 1fr} .stats div:nth-child(3){border-left:0} .stats div:nth-child(n+3){border-top:1px solid var(--rule)} }

/* Tables (compare, plans) */
.tbl-wrap{overflow-x:auto; border:1px solid var(--rule-2); border-radius:14px; background:var(--deep)}
table.t{width:100%; border-collapse:collapse; min-width:760px}
.t th,.t td{padding:15px 18px; border-top:1px solid var(--rule); text-align:left; vertical-align:top; font-size:15px}
.t thead th{border-top:0; font-size:17px; font-weight:600; background:var(--panel)}
.t thead th small{display:block; color:var(--dim); font-weight:400; font-size:13px}
.t tbody th{font-weight:500; width:24%}
.t td{color:var(--mute)}
.t tbody tr:nth-child(even) td,.t tbody tr:nth-child(even) th{background:rgba(11,52,71,.35)}
.t .us{color:var(--text); border-left:2px solid var(--or); background:linear-gradient(180deg,rgba(240,90,34,.10),rgba(240,90,34,.03))!important}
.t thead .us{color:var(--or-2)}
.t.plans td,.t.plans th{text-align:center} .t.plans tbody th{text-align:left}
.t.plans .best{border-left:2px solid var(--green); border-right:2px solid var(--green)}
.y{color:var(--green); font-weight:700} .n{color:var(--red); font-weight:700}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:9px; vertical-align:1px}
.dot.y{background:var(--green)} .dot.p{background:linear-gradient(90deg,var(--yellow) 50%,transparent 50%); box-shadow:inset 0 0 0 1.5px var(--yellow)} .dot.n{background:none; box-shadow:inset 0 0 0 1.5px var(--dim)}
.note{color:var(--dim); font-size:13px; margin-top:14px; max-width:80ch}

/* Roles tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:26px}
.tab{background:var(--deep); border:1px solid var(--rule-2); color:var(--mute); padding:10px 18px; border-radius:999px; font:500 15px var(--font); cursor:pointer}
.tab[aria-selected="true"]{background:var(--grad); color:#fff; border-color:transparent}

/* Contact form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; background:var(--deep); border:1px solid var(--rule-2); border-radius:14px; padding:28px}
.form .full{grid-column:1/-1}
.field{display:grid; gap:6px}
.field label{font-weight:500; font-size:15px}
.field input,.field select,.field textarea{width:100%; min-height:46px; padding:10px 12px; border-radius:8px; border:1px solid var(--rule-2); background:var(--ink); color:var(--text); font:inherit; font-size:16px}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--cyan)}
.field .err{color:#FF9C9C; font-size:13px}
.field.bad input{border-color:var(--red)}
.hp{position:absolute; left:-9999px}
.msg{padding:12px 14px; border-radius:8px; font-size:15px}
.msg.ok{background:rgba(47,208,122,.1); border:1px solid rgba(47,208,122,.5)}
.msg.e{background:rgba(255,92,92,.1); border:1px solid rgba(255,92,92,.5)}
@media (max-width: 700px){ .form{grid-template-columns:1fr; padding:20px} }

/* CTA band */
.cta{padding:110px 0; border-top:1px solid var(--rule); background:radial-gradient(700px 360px at 80% 50%, rgba(240,90,34,.16), transparent 70%)}
.cta h2{font-size:clamp(34px,4.6vw,60px); line-height:1.04; max-width:16ch; margin-bottom:18px}
.cta p{color:var(--mute); max-width:36rem; margin:0 0 28px; font-size:18px}

/* Footer */
footer{border-top:1px solid var(--rule); padding:56px 0 40px; background:var(--deep); font-size:15px}
.fgrid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
footer h4{margin:0 0 12px; font-size:15px; font-weight:600}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
footer a{color:var(--mute); text-decoration:none}
footer a:hover{color:var(--text)}
footer p{color:var(--mute); margin:12px 0 0; font-size:14px}
.legal{margin-top:40px; padding-top:20px; border-top:1px solid var(--rule); color:var(--dim); font-size:13px; display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between}
@media (max-width: 800px){ .fgrid{grid-template-columns:1fr 1fr} }


/* ---------- v2.1 site additions ---------- */
.topstrip{background:#01121B; border-bottom:1px solid var(--rule); font-size:13px; color:var(--mute)}
.topstrip .wrap{display:flex; justify-content:space-between; gap:16px; padding:7px 0; flex-wrap:wrap}
.topstrip a{color:var(--text); text-decoration:none} .topstrip a:hover{color:var(--or-2)}
.topstrip .ts-r{display:flex; gap:18px}
@media (max-width:700px){ .topstrip .ts-r{display:none} }
.brand span{display:flex; flex-direction:column; line-height:1.05}
.brand small{font-size:11px; font-weight:500; color:var(--mute); letter-spacing:.01em}
.dd.dd-2{grid-template-columns:1fr 1fr; min-width:640px}
@media (max-width:1080px){ .dd.dd-2{grid-template-columns:1fr; min-width:0} }
.crumbs{font-size:13px; color:var(--dim); padding:14px 0 0}
.crumbs a{color:var(--mute); text-decoration:none} .crumbs a:hover{color:var(--text)}
.h3{font-size:clamp(24px,2.4vw,32px); line-height:1.15; margin-bottom:14px}
.narrow{max-width:820px}
.madeby{margin:22px 0 0; color:var(--mute); font-size:14px} .madeby a{color:var(--text)}
.caps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.cap{display:block; padding:22px; border:1px solid var(--rule); border-radius:14px; background:var(--deep); text-decoration:none; color:var(--text); transition:border-color .2s, transform .2s}
.cap:hover{border-color:var(--c); transform:translateY(-3px)}
.cap i{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:#fff; margin-bottom:14px}
.cap i svg{width:21px; height:21px}
.cap h3{font-size:18px; margin-bottom:6px} .cap p{margin:0; color:var(--mute); font-size:14px}
.cap .more{display:block; margin-top:12px; color:var(--c); font-weight:600; font-size:14px}
@media (max-width:1000px){ .caps{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .caps{grid-template-columns:1fr} }
.forms{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.forms div{border:1px solid var(--rule); border-radius:12px; background:var(--deep); padding:16px; text-align:center}
.forms svg{width:100%; max-width:140px; margin:0 auto 8px} .forms circle{fill:var(--or-2)}
@media (max-width:700px){ .forms{grid-template-columns:1fr 1fr} }
.faq details{border-bottom:1px solid var(--rule); padding:16px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:20px}
.faq summary::after{content:"+"; color:var(--or-2); font-size:22px; line-height:1} .faq details[open] summary::after{content:"–"}
.faq p{color:var(--mute); margin:10px 0 0}
.code{background:#01121B; border:1px solid var(--rule-2); border-radius:10px; padding:16px 18px; overflow-x:auto; font:14px/1.6 ui-monospace, Menlo, Consolas, monospace; color:#CFE3EC}
code{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.92em; background:var(--panel); padding:1px 6px; border-radius:4px}
.kv{display:grid; grid-template-columns:200px 1fr; gap:10px 16px} .kv dt{color:var(--mute)} .kv dd{margin:0}
.help{color:var(--dim); font-size:13px}
label.chk{display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--mute)} label.chk input{width:18px; height:18px; min-height:0; margin-top:3px; accent-color:var(--or)}
.stage .overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
/* platforms (download page) */
.plats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.plat{border:1px solid var(--rule-2); border-radius:16px; background:var(--deep); padding:26px; display:flex; flex-direction:column}
.plat.feat{border-color:var(--or); box-shadow:0 30px 60px -30px rgba(240,90,34,.5)}
.plat i{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:#fff; margin-bottom:16px} .plat i svg{width:24px; height:24px}
.plat h3{font-size:22px; margin-bottom:4px} .plat .who{color:var(--or-2); font-weight:600; font-size:14px; margin-bottom:12px}
.plat p{color:var(--mute); margin:0 0 14px} .plat .ticks{margin:0 0 20px} .plat .btn{margin-top:auto}
.plat .alt{margin-top:10px; font-size:13px; color:var(--dim); text-align:center}
@media (max-width:960px){ .plats{grid-template-columns:1fr} }