/* YOOO! — Orange Intelligence. Dark war-face hero melting into a bright, warm, orange body. */
:root{
  --pearl:#fff7f0; --pearl2:#fff0e6; --ink:#241711; --graphite:#2a1a12; --muted:#6b5347; --faint:#9a8578;
  --orange:#ff6a00; --signal:#ff8a00; --amber:#ffb000; --burnt:#c63e00; --cream:#fff4ea;
  --edge:rgba(198,62,0,.16); --edge-hi:rgba(255,106,0,.55); --card:#ffffff;
  --head:"Jakarta","Inter",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--pearl);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;text-align:center;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--burnt);text-decoration:none}
h1,h2,h3{font-family:var(--head);font-weight:800;letter-spacing:-.025em;line-height:1.08;color:var(--ink)}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* header — warm command console */
.head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:11px 22px;background:rgba(255,247,240,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--edge)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:800 20px/1 var(--head);letter-spacing:-.03em}
.brand img{border-radius:7px}
.brand span{color:var(--orange)}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{color:var(--muted);font-weight:600;font-size:15px}
.menu a:hover{color:var(--orange)}
.langsel{background:#fff;color:var(--ink);border:1px solid var(--edge);border-radius:999px;padding:7px 12px;font:600 14px var(--body)}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* hero — dark war face melting into the pearl body */
.hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;justify-content:center;padding:0 22px 8vh;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:#120f1a url(/assets/hero.webp) center 30%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,10,.1) 0,rgba(18,12,10,.4) 50%,rgba(255,247,240,.1) 86%,var(--pearl) 100%)}
.hero-in{position:relative;z-index:2;max-width:820px}
.hero h1{color:#fff;font-size:clamp(30px,6vw,60px);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .sub{color:#f3e7dd;margin-top:18px;font-size:clamp(16px,2.4vw,20px);max-width:620px;margin-inline:auto;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.chip{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:#ffe7cf;background:rgba(0,0,0,.4);border:1px solid rgba(255,138,0,.4);border-radius:999px;padding:8px 15px}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}

/* buttons — orange launch */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--orange),var(--signal));color:#fff;font:700 16px var(--body);border:0;border-radius:13px;padding:14px 24px;cursor:pointer;box-shadow:0 10px 26px rgba(255,106,0,.32);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,106,0,.42)}
.btn.big{margin-top:30px;padding:17px 34px;font-size:18px}
.btn.ghost{background:#fff;color:var(--burnt);border:1px solid var(--edge-hi);box-shadow:none}
.btn.ghost:hover{background:var(--pearl2)}

/* sections — bright and warm */
.sec{padding:64px 0;background:var(--pearl);position:relative}
.sec.alt{background:var(--pearl2)}
.sec h2{font-size:clamp(25px,4vw,36px)}
.lead{color:var(--muted);max-width:620px;margin:14px auto 0;font-size:18px}
.fine{color:var(--faint);font-size:13px;max-width:620px;margin:22px auto 0}
.eyebrow{display:inline-block;color:var(--burnt);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.link{font-weight:800;color:var(--burnt)}

/* verify form */
.vform{max-width:460px;margin:30px auto 0;display:grid;gap:14px;text-align:start}
.vform label{display:grid;gap:6px}
.vform span{font-size:14px;color:var(--muted);font-weight:700}
.vform input{font:400 16px var(--body);color:var(--ink);background:#fff;border:1px solid var(--edge);border-radius:12px;padding:13px 14px;width:100%}
.vform input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.vbar{margin-top:4px}.vform .btn{width:100%}
.err{color:#c62828;font-size:14px;font-weight:700;min-height:1px}
.result{max-width:520px;margin:34px auto 0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:26px 22px;box-shadow:0 20px 50px rgba(198,62,0,.08)}
.badge-card{display:flex;gap:16px;align-items:center;text-align:start;background:linear-gradient(135deg,#fff,var(--pearl2));border:1px solid var(--edge-hi);border-radius:16px;padding:18px}
.badge-seal{flex:none;color:var(--orange)}.badge-seal svg{width:54px;height:54px}
.badge-body{display:grid;gap:3px}
.badge-body b{font:800 18px var(--head);color:var(--ink)}
.badge-body small{color:var(--muted);font-size:13px}
.badge-tag{display:inline-block;width:fit-content;margin-top:5px;background:linear-gradient(135deg,var(--orange),var(--amber));color:#2a1200;font:800 12px var(--body);letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.badge-body em{font-style:normal;color:var(--faint);font-size:12px;margin-top:4px}
.result .btn{margin-top:18px}

/* steps */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;text-align:start}
.step{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:22px;box-shadow:0 8px 24px rgba(198,62,0,.05)}
.step span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--amber));color:#fff;font:800 16px var(--head);margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--muted);font-size:15px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;text-align:start}
.plan{position:relative;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(198,62,0,.05)}
.plan.hot{border-color:var(--edge-hi);box-shadow:0 0 0 2px var(--edge-hi),0 22px 50px rgba(255,106,0,.18)}
.plan .tag{position:absolute;top:-11px;left:22px;background:linear-gradient(135deg,var(--orange),var(--signal));color:#fff;font:800 11px var(--body);letter-spacing:.04em;padding:4px 10px;border-radius:999px}
.plan h3{font-size:20px}
.price{font:800 34px/1 var(--head);color:var(--ink);margin:10px 0 16px}
.price small{font:700 14px var(--body);color:var(--muted)}
.plan ul{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.plan li{position:relative;padding-left:24px;color:var(--muted);font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}

/* empire band */
.band{background:linear-gradient(135deg,#fff3e8,#ffe4cf)}
.emp-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cafe{display:flex;gap:18px;align-items:center;text-align:start;max-width:720px;margin:34px auto 0;background:#fff;border:1px solid var(--edge-hi);border-radius:var(--r);padding:22px;box-shadow:0 14px 36px rgba(255,106,0,.12)}
.cafe-badge{flex:none;width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:30px;background:linear-gradient(135deg,var(--amber),var(--orange));border-radius:16px}
.cafe-body h3{font-size:19px}
.cafe-body p{color:var(--muted);font-size:15px;margin:4px 0 8px}

/* faq */
.faq{max-width:760px;margin:28px auto 0;text-align:start;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:4px 18px}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:22px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);padding:0 0 16px;font-size:15px}

.legal .lead,.legal p{max-width:720px;margin-inline:auto}
.legal h3{margin:22px 0 4px;font-size:18px}.legal p{color:var(--muted);margin-top:4px}

/* footer — warm graphite (not black, not blue) */
.foot{background:var(--graphite);border-top:3px solid var(--orange);padding:26px 0;color:#d9c4b6;font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:#f0ddce}.foot .made{color:#b89a89}

@media (max-width:860px){ .grid4{grid-template-columns:repeat(2,1fr)} .plans{grid-template-columns:1fr} }
@media (max-width:680px){
  .menu{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;gap:0;background:var(--pearl);border-bottom:1px solid var(--edge)}
  .menu.open{display:flex}.menu a{padding:15px 22px;border-top:1px solid var(--edge)}
  .burger{display:flex;margin-left:auto;order:3}.langsel{order:2}
  .grid4{grid-template-columns:1fr}.cafe{flex-direction:column;text-align:center}
}
[dir=rtl] .vform,[dir=rtl] .grid4,[dir=rtl] .plans,[dir=rtl] .faq,[dir=rtl] .badge-card,[dir=rtl] .cafe{text-align:right}