/* ===== COLOURS & FONTS: change the look of the whole site here ===== */
:root{
  --card:#fff; --text:#0b1b2b;   /* card colour + body text colour (changed by dark theme) */
  --ink:#0b1b2b;      /* dark navy: text + headers */
  --blue:#1f6fb2;     /* logo blue */
  --bolt:#f5b301;     /* logo lightning yellow */
  --bg:#f6f7f9;       /* page background */
  --line:#dde3ea;
  --head:'Archivo',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font:17px/1.6 var(--body);color:var(--text);background:var(--bg);transition:background .4s,color .4s}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0 0 .5em;font-weight:700}
h2{font-size:clamp(28px,4vw,44px)}
a{color:var(--blue)}
.wrap{max-width:1120px;margin:auto;padding:72px 20px}
.narrow{max-width:760px}
.lead{color:#51606e;max-width:55ch;margin:0 0 28px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
:focus-visible{outline:3px solid var(--bolt);outline-offset:2px}

/* ===== BUTTONS ===== */
.btn{display:inline-block;background:var(--bolt);color:var(--ink);font:600 16px var(--body);padding:12px 24px;border:2px solid var(--bolt);border-radius:999px;cursor:pointer;text-decoration:none}
.btn:hover{background:#ffc933}
.btn-line{background:transparent;border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{padding:8px 18px}

/* ===== NAV BAR ===== */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:var(--ink)}
.brand img{height:42px;background:#fff;border-radius:6px;padding:2px 8px}
.nav nav{display:flex;align-items:center;gap:20px}
.nav ul{list-style:none;margin:0;padding:0}
.nav nav>ul{display:flex;gap:6px}
.nav a,.sub-btn{color:#fff;text-decoration:none;font:500 16px var(--body);background:none;border:0;padding:12px;cursor:pointer;display:block}
.has-sub{position:relative}
.sub-btn:after{content:" ▾";font-size:12px}
.sub{position:absolute;top:100%;left:0;min-width:190px;background:#fff;border-radius:10px;box-shadow:0 12px 30px #0003;padding:6px;display:none}
.sub a{color:var(--ink);border-radius:6px}
.sub a:hover{background:var(--bg)}
.has-sub.open .sub{display:block}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== CAROUSELS ===== */
.carousel{position:relative;overflow:hidden}
.track{display:flex;transition:transform .6s ease}
.slide{flex:0 0 100%;margin:0}
.hero .slide{min-height:min(82vh,720px);background:linear-gradient(90deg,#0b1b2bd9 0%,#0b1b2b33 60%),var(--img) center/cover;display:flex;align-items:center}
.slide-text{max-width:1120px;width:100%;margin:auto;padding:0 20px 0 max(20px,6vw);color:#fff}
.slide-text h1{font-size:clamp(34px,6vw,70px);max-width:14ch}
.slide-text p{max-width:42ch;font-size:19px;margin-bottom:24px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:#fffe;font-size:26px;cursor:pointer}
.prev{left:14px}.next{right:14px}
.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#fff8;cursor:pointer;padding:0}
.dots .on{background:var(--bolt);width:26px;border-radius:6px}
.sess{border-radius:16px}
.sess img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sess figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 34px;color:#fff;background:linear-gradient(#0000,#000a)}

/* ===== FACTS STRIP ===== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--blue);color:#fff}
.facts div{padding:22px;text-align:center;border-right:1px solid #fff3}
.facts b{display:block;font:700 24px var(--head)}

/* ===== CARDS ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin:0}
.card h3{font-size:22px;margin-top:14px}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.ph{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#eef1f5,#eef1f5 10px,#e4e9ef 10px,#e4e9ef 20px);color:#6b7885}
.tag{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;background:#fff3cc;padding:2px 10px;border-radius:99px}
time{font-size:14px;color:#6b7885}
cite{display:block;margin-top:12px;font-style:normal;font-weight:600}

/* ===== 360 VIEWER (white background) ===== */
.viewer{background:#fff;border-radius:10px;border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;cursor:grab;touch-action:pan-y;position:relative;user-select:none}
.viewer:active{cursor:grabbing}
.viewer img{max-height:100%;object-fit:contain;pointer-events:none;transition:transform .08s}
.viewer:after{content:"⟲ Drag to rotate";position:absolute;bottom:8px;right:12px;font-size:13px;color:#6b7885}

/* ===== DAY / NIGHT ===== */
.daynight{background:#e9f2fb;transition:background .5s,color .5s}
.daynight[data-mode=night]{background:#0b1b2b;color:#fff}
.daynight[data-mode=night] .lead{color:#b8c4d0}
.dn-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}
.dn-pic{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.dn-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.img-night{opacity:0}
[data-mode=night] .img-night{opacity:1}
.switch{display:inline-flex;background:#fff;border-radius:99px;padding:4px}
.switch button{border:0;background:none;padding:8px 22px;border-radius:99px;font:600 16px var(--body);cursor:pointer}
.switch .on{background:var(--ink);color:#fff}

/* ===== TABLE ===== */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;min-width:560px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--ink);color:#fff}
tbody th{background:#f0f3f7;width:22%}

/* ===== CALCULATOR / FORMS ===== */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
label{display:block;font-weight:600;margin-bottom:14px;font-size:15px}
input,select{display:block;width:100%;margin-top:6px;padding:11px 12px;font:16px var(--body);border:1px solid #b9c4cf;border-radius:8px;background:#fff}
.check{display:flex;gap:10px;font-weight:400}.check input{width:auto;margin:4px 0 0}
.result{font-size:20px}.result b{color:var(--blue);font-size:30px}
.signup{background:var(--ink);color:#fff}
.signup .lead{color:#b8c4d0}
.signup .form{background:#fff;color:var(--ink);padding:24px;border-radius:14px}
.msg{margin:12px 0 0;font-weight:600;color:#1a7f45}

/* ===== FAQ ===== */
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
details p{margin:10px 0 0;color:#51606e}

/* ===== CONTACT / FOOTER / POPUP ===== */
.map{width:100%;height:340px;border:0;border-radius:14px}
footer{background:var(--ink);color:#b8c4d0;text-align:center;padding:36px 20px}
footer img{height:44px;margin:0 auto 12px;background:#fff;border-radius:6px;padding:2px 10px}
dialog{border:0;border-radius:16px;padding:28px;width:min(440px,92vw)}
dialog::backdrop{background:#0b1b2bb3}
.close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:30px;cursor:pointer}

/* ===== PHONES AND TABLETS ===== */
@media (max-width:860px){
  .burger{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;align-items:stretch;padding:8px 20px 20px;max-height:80vh;overflow:auto}
  .nav nav.open{display:flex}
  .nav nav>ul{flex-direction:column}
  .sub{position:static;box-shadow:none;background:#162c3f}
  .sub a{color:#fff}
  .has-sub.open .sub{display:block}
  .grid-2,.grid-3,.calc,.dn-inner{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .wrap{padding:52px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== NEW: theme button, toast, page banner, other pages ===== */
.nav nav{margin-left:auto}
.theme{width:40px;height:40px;margin-left:14px;border-radius:50%;border:2px solid #fff6;background:#ffffff14;color:var(--bolt);font-size:20px;line-height:1;cursor:pointer}
.theme:hover{background:#ffffff30}
.page-title{background:var(--ink);color:#fff}
.page-title .wrap{padding:48px 20px}
.page-title h1{font-size:clamp(34px,5vw,56px);margin:0 0 8px}
.page-title .lead{color:#b8c4d0;margin:0}
.link{text-decoration:none;color:inherit;display:block}
.link:hover{border-color:var(--blue)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:99px;opacity:0;transition:.3s;z-index:99;border:2px solid var(--bolt)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.welcome h2{margin-bottom:6px}
.fnav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.fnav a{color:#fff;text-decoration:none}
@media (max-width:860px){.theme{margin-left:auto;margin-right:6px}.nav nav{margin-left:0}}

/* ===== DARK THEME (night wallpaper). Change colours here ===== */
[data-theme=dark]{--bg:#07111c;--text:#fffacd;--line:#24394d;--card:#1d64a2x}
[data-theme=dark] .card,[data-theme=dark] details,[data-theme=dark] table,[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] dialog,[data-theme=dark] .signup .form{background:var(--card);color:var(--text)}
[data-theme=dark] tbody th{background:#13293d}
[data-theme=dark] .lead,[data-theme=dark] details p{color:#a9b8c6}
[data-theme=dark] .btn-line{color:var(--text);border-color:var(--text)}
[data-theme=dark] .daynight[data-mode=day]{background:#10283d;color:#fff}
[data-theme=dark] .daynight[data-mode=day] .lead{color:#b8c4d0}

/* Privacy page text spacing */
.policy h2{font-size:24px;margin:1.6em 0 .4em}
.policy ul{padding-left:22px}