/* V6.18: Full site with hero image (no outlines), solid buttons, pill header, moving backgrounds */
:root{
  --bg:#ffffff;
  --text:#202124;
  --muted:#566072;
  --panel:#E2E6EF;
  --line:#C3CCE1;
  --brand:#1A4093;
  --brand-2:#3A7BFA;
  --red:#E23D28;
  --blue:#1A73E8;
  --green:#22B573;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--text); font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial }
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

/* Global background with site pattern (slow) */
.site-bg{position:fixed; inset:0; z-index:-2; background:#fff url('assets/bg_site_pattern.jpg?v=618') repeat; opacity:.18; animation:bgMove 38s linear infinite}
@keyframes bgMove{from{background-position:0 0} to{background-position:600px 600px}}

/* Splash full-screen with scattered icons (faster) */
.splash{position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:9999}
.splash-bg{position:absolute; inset:0; background: url('assets/bg_icons_splash.png?v=618') repeat; opacity:.26; animation:bgMove 11s linear infinite}
.splash-inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px}
.logo-svg{width:84px; height:84px}
.logo-word{font-weight:900; font-size:28px; color:#202124; letter-spacing:.5px}
.morph-loader{position:relative; width:150px; height:130px}
.morph-loader .qarc{position:absolute; top:-2px; left:14px; width:120px; height:120px}
.morph-loader .qarc circle{transform-origin:50% 50%; animation:qspin 1.05s ease-in-out 1 forwards}
@keyframes qspin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.morph-loader .ring{position:absolute; top:-2px; left:14px; width:120px; height:120px; opacity:0}
.morph-loader.draw .ring{opacity:1}
.morph-loader .verify.cover{position:absolute; top:-2px; left:14px; width:120px; height:120px; opacity:0; transform:scale(.94); transition:opacity .28s ease, transform .28s ease}
.morph-loader.done .verify.cover{opacity:1; transform:scale(1)}

/* Header pill (animated gradient) */
header{position:sticky; top:8px; z-index:60; transition:transform .25s ease; background:transparent}
header.hide{transform:translateY(-120%)}
.topbar-wrap{backdrop-filter: blur(6px); background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); background-size: 200% 100%; animation:grad 12s ease-in-out infinite; border-radius:9999px; padding:8px 12px; box-shadow:0 10px 30px rgba(26,64,147,.18); border:1px solid rgba(255,255,255,.35)}
@keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.topbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; height:56px; color:#fff}
.brand{display:flex; justify-content:center; align-items:center; gap:10px; font-weight:800; color:#fff}
.brand .mark{display:flex; align-items:center; gap:8px}
.brand .mark svg{width:28px; height:28px}
.search input{width:100%; padding:10px 12px; border-radius:12px; border:none; background:rgba(255,255,255,.12); color:#fff}
.search input::placeholder{color:#f3f3f3}
.right-actions{display:flex; justify-content:flex-end; align-items:center; gap:8px}
.nav{display:flex; align-items:center; justify-content:center; gap:6px; height:48px}
.nav a{padding:8px 12px; border-radius:12px; color:#fff}
.nav a.active, .nav a:hover{background:rgba(255,255,255,.15)}

/* Solid buttons (no borders, one color) */
.btn{display:inline-block; padding:10px 16px; border-radius:10px; border:none; color:#fff; font-weight:700; cursor:pointer; text-align:center}
.btn:hover{opacity:.9}
.btn-red{background: linear-gradient(135deg, #ff6b57, var(--red));}
.btn-blue{background: var(--blue);}
.btn-green{background: var(--green);}

/* Frame */
.frame{position:relative; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); overflow:hidden}

/* HERO (image from assets, no text shadows) */
.hero{position:relative; min-height: 78vh; display:flex; align-items:center}
.hero.taller2{min-height: 120vh}
.hero .frame{width: calc(100% - 24px); margin: 12px auto}
.hero .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.35))}
.hero-bg{position:absolute; inset:0; background:url('assets/hero.jpg?v=620') center/cover no-repeat}
.hero-content{position:relative; z-index:1; max-width: var(--maxw); padding: 80px 8px}
.h-title{font-size: clamp(30px, 5vw, 56px); line-height:1.15; margin:0 0 12px; color:#fff}
.h-text{color:#f1f1f1; margin:0 0 18px; font-size: clamp(15px, 2.6vw, 19px)}

/* Features */
.features .frame{width: calc(100% - 24px); margin: 12px auto; padding: 24px 0; background:#fff}
.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:14px; padding: 0 20px 10px}
.card{background:#fff; border:1px solid var(--line); border-radius: 14px; padding:18px; text-align:center}
.card h3{margin:10px 0 8px; font-size:18px; color:var(--brand)}
.card p{margin:0; color:var(--muted)}
.mini-icon{width:48px; height:48px; display:block; margin:0 auto 8px}

/* Split */
.split .frame{width: calc(100% - 24px); margin: 12px auto; padding: 24px 0; background:#fff}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center}
.split .img{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; height: 560px}
.split .img img{width:100%; height:100%; object-fit:cover}
.split .text h2{margin:0 0 10px; font-size: clamp(20px, 3vw, 32px); color:var(--brand)}
.split .text p{margin:0 0 14px; color:var(--muted)}

/* Rails */
.section .frame{width: calc(100% - 24px); margin: 12px auto; padding: 24px 0; background:#fff}
.section .head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding: 0 20px}
.section-title{position:relative; margin:0; padding:10px 14px 10px 22px; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--brand)}
.section-title::before{content:""; position:absolute; left:10px; top:10px; bottom:10px; width:4px; background:linear-gradient(180deg, var(--red), #F7C948)}
.rail{display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding: 0 20px 8px}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#cfd8ea; border-radius:999px}
.item{scroll-snap-align:start; min-width: 260px; background:#fff; border:1px solid var(--line); border-radius:16px; display:flex; flex-direction:column; overflow:hidden}
.thumb{aspect-ratio: 4/3; background:#f3f6fb; display:flex; align-items:center; justify-content:center}
.thumb img{width:100%; height:100%; object-fit:cover}
.info{padding:12px}
.name{font-weight:700; margin:0 0 6px}
.stars{color:#F7C948; font-size:14px}
.sub{color:#667085; font-size:14px}

footer{padding:30px 0; color:#667085; text-align:center}

/* Mobile */
@media (max-width: 900px){
  header{top:6px}
  .split-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .topbar{grid-template-columns:1fr auto 1fr}
  .search{display:none}
  .nav{flex-wrap:wrap; padding:6px 10px; gap:4px}
  .hero{min-height: 72vh}
  .item{min-width: 72vw}
}
@media (max-width: 520px){
  .item{min-width: 86vw}
  .h-title{font-size: clamp(26px, 7vw, 36px)}
  .h-text{font-size: 15px}
  .btn{padding:10px 14px}
}

/* V6.19: Full-cover Hero (edge-to-edge, no gaps) */
.hero.taller2{ min-height: 120vh; }
.hero .frame{ width:100%; margin:0; border:none; border-radius:0; box-shadow:none; }
.hero .hero-bg{ background-size: cover; background-position: center; }

/* V6.19.1: zero-gap hero */
html, body { height: 100%; }
body { padding: 0; }
header { top: 0; }                 /* remove 8px breathing to kill top gap */
main { margin: 0; padding: 0; }
.hero { margin: 0; padding: 0; min-height: 100vh; } /* exactly full viewport */
.hero .frame { width: 100%; margin: 0; border: none; border-radius: 0; box-shadow: none; }
.hero .hero-bg { background-size: cover; background-position: center center; }
/* make first section after hero start immediately */
.features .frame, .split .frame, .section .frame { margin-top: 0; }
/* avoid accidental margin collapse from headings */
.h-title, .h-text { margin-block-start: 0; }
/* ensure no extra spacing added by container near hero */
.hero .container { padding-left: 20px; padding-right: 20px; }

/* V6.19.2: zero-gap full-cover hero with new artwork */
header{top:0}
.hero{min-height:100vh}
.hero .frame{width:100%; margin:0; border:none; border-radius:0; box-shadow:none}
.hero .hero-bg{background:url('assets/hero.jpg?v=620') center/cover no-repeat}
main{margin:0; padding:0}