/* ===== IDRAKIA — shared design system ===== */
:root{
  --black:#0B0806;--char:#13100C;--char-2:#1B1612;
  --ember:#FF5C1E;--ember-2:#FF7A38;--flame:#E23F12;--glow:#FFB071;
  --cream:#F3ECE1;--cream-2:#E9DDCC;--ink:#1A1310;--mute:#6E5E50;
  --on-dark:#F3ECE1;--on-dark-mute:rgba(243,236,225,.6);
  --line-d:rgba(243,236,225,.13);--line-l:rgba(26,19,16,.12);
  --serif:'Fraunces',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;--maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--black);color:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--ember);color:#1a0a03}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.012em}
em{font-style:italic}
.lab{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.idx{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;opacity:.7}
.meta-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-d);padding-bottom:14px;margin-bottom:42px}
.meta-row.l{border-color:var(--line-l)}

.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--serif);font-style:italic;font-size:1rem;font-weight:400;background:var(--cream);color:#15100c;padding:.5em 1.25em;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.pill:hover{transform:translateY(-2px);background:var(--ember);color:#1a0a03;box-shadow:0 10px 30px -12px rgba(255,92,30,.7)}
.pill.outline{background:transparent;color:var(--cream);border-color:var(--line-d)}
.pill.outline:hover{background:var(--cream);color:#15100c;border-color:transparent}
.pill[disabled]{opacity:.55;pointer-events:none}

/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(11,8,6,.72);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line-d)}
.topline{display:flex;align-items:center;justify-content:space-between;height:38px;font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute);border-bottom:1px solid var(--line-d)}
.topline a{color:var(--on-dark-mute);transition:color .25s}.topline a:hover{color:var(--cream)}
.tl-left{display:flex;align-items:center;gap:.7em}
.tl-left::before{content:"";width:22px;height:1px;background:var(--ember);opacity:.85;flex:none}
@media(max-width:620px){.topline{display:none}}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:1.52rem;font-weight:500;letter-spacing:.16em;color:var(--cream)}
.bmark{width:33px;height:33px;flex:none}
.navlinks{display:flex;gap:30px}
.navlinks a{font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--on-dark-mute);transition:color .25s;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--ember);transition:width .3s}
.navlinks a:hover,.navlinks a.active{color:var(--cream)}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:22px}
#motionToggle{background:none;border:none;color:var(--on-dark-mute);font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:.5em;transition:color .25s}
#motionToggle:hover{color:var(--cream)}
#motionToggle .d{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember)}
#motionToggle.off .d{background:#6E5E50;box-shadow:none}
#motionToggle{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
body.motion-avail #motionToggle{opacity:1;visibility:visible}
.navtoggle{display:none;background:none;border:none;color:var(--cream);cursor:pointer;width:30px;height:26px;position:relative;padding:0;flex:none}
.navtoggle span{position:absolute;left:4px;right:4px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .25s,top .3s}
.navtoggle span:nth-child(1){top:6px}.navtoggle span:nth-child(2){top:12px}.navtoggle span:nth-child(3){top:18px}
header.nav-open .navtoggle span:nth-child(1){top:12px;transform:rotate(45deg)}
header.nav-open .navtoggle span:nth-child(2){opacity:0}
header.nav-open .navtoggle span:nth-child(3){top:12px;transform:rotate(-45deg)}

/* ===== HERO (shared base) ===== */
.hero{position:relative;overflow:hidden;background:#070504;padding:170px 0 90px}
.hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 80% at 78% 36%,rgba(255,92,30,.22),transparent 60%),radial-gradient(50% 60% at 20% 90%,rgba(226,63,18,.12),transparent 60%)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{position:relative;z-index:2;max-width:920px}
.hero .lab{color:var(--glow)}
.hero h1{font-size:clamp(2.8rem,7vw,5.4rem);font-weight:300;color:#fff;margin:1.2rem 0 1.4rem;text-shadow:0 6px 50px rgba(0,0,0,.6)}
.hero h1 em{color:var(--ember-2)}
.hero .sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--on-dark-mute);max-width:54ch;margin-bottom:2.2rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ===== generic section helpers ===== */
.section{padding:108px 0;scroll-margin-top:120px}
.section.char{background:var(--char)}
.section.light{background:var(--cream);color:var(--ink)}
.section .lab{color:var(--ember)}
.section.light .lab{color:var(--flame)}
.section.light .meta-row{border-color:var(--line-l)}
.section.light .idx{color:var(--mute)}
.h2big{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:300;color:var(--cream)}
.section.light .h2big{color:var(--ink)}
.h2big em{color:var(--glow)}.section.light .h2big em{color:var(--flame)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.32;color:var(--cream);max-width:24ch}
.section.light .lead{color:var(--ink)}
.lead em{color:var(--glow)}.section.light .lead em{color:var(--flame)}
.muted{color:var(--on-dark-mute)}.section.light .muted{color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{font-size:.72rem;letter-spacing:.04em;padding:.32em .85em;border:1px solid var(--line-d);border-radius:100px;color:var(--on-dark-mute)}
.section.light .tags span{border-color:var(--line-l);color:var(--mute)}

/* ===== PROCESS band ===== */
.process{background:linear-gradient(155deg,#FF6A28 0%,#E23F12 55%,#9c2c0c 100%);color:#fff;position:relative;overflow:hidden;padding:108px 0}
.process::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,rgba(255,220,180,.45),transparent 60%);mix-blend-mode:screen}
.process .wrap{position:relative;z-index:1}
.process .meta-row{border-color:rgba(255,255,255,.28)}
.process .meta-row .lab,.process .meta-row .idx{color:rgba(255,245,235,.9)}
.process h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:300;max-width:18ch;margin-bottom:54px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step .sn{font-family:var(--serif);font-size:1.1rem;opacity:.85;margin-bottom:1rem}
.step h3{font-size:1.5rem;font-weight:400;margin-bottom:.5rem}
.step p{font-size:.92rem;color:rgba(255,245,235,.85)}

/* ===== CTA ===== */
.cta{background:var(--black);text-align:center;padding:120px 0}
.cta .lab{color:var(--ember);display:block;margin-bottom:1.2rem}
.cta h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:300;color:var(--cream);max-width:18ch;margin:0 auto 1.4rem}
.cta h2 em{color:var(--glow)}
.cta p{color:var(--on-dark-mute);max-width:44ch;margin:0 auto 2rem}

/* ===== FORM ===== */
.form{background:var(--char-2);border:1px solid var(--line-d);border-radius:20px;padding:36px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}.field.full{grid-column:1/-1}
label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:.5rem}
input,select,textarea{width:100%;font-family:var(--sans);font-size:.92rem;color:var(--cream);background:var(--black);border:1px solid var(--line-d);border-radius:10px;padding:.8em 1em;transition:border-color .25s,box-shadow .25s}
input::placeholder,textarea::placeholder{color:rgba(243,236,225,.32)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,92,30,.16)}
select{color:rgba(243,236,225,.6)}
textarea{resize:vertical;min-height:90px}
.form .pill{width:100%;justify-content:center;margin-top:6px}
.form-ok{display:none;background:rgba(255,92,30,.12);border:1px solid var(--ember);color:var(--glow);padding:1rem;border-radius:10px;font-size:.88rem;margin-bottom:14px}
.form-ok.show{display:block}
.form-err{display:none;background:rgba(226,63,18,.12);border:1px solid #E2563A;color:#FFB7A6;padding:1rem;border-radius:10px;font-size:.88rem;margin-bottom:14px}
.form-err.show{display:block}
.form-err a{color:#FFD2C6;text-decoration:underline}
.field.err input,.field.err select,.field.err textarea{border-color:#E2563A;box-shadow:0 0 0 3px rgba(226,63,18,.14)}
.form-note{font-size:.74rem;color:var(--on-dark-mute);text-align:center;margin-top:1rem}
.form-note a{color:var(--glow)}

/* ===== FOOTER ===== */
footer{background:var(--black);padding:90px 0 36px;border-top:1px solid var(--line-d)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line-d)}
.fbrand .brand{display:inline-flex;margin-bottom:1.1rem}
.fbrand p{color:var(--on-dark-mute);font-size:.9rem;max-width:30ch}
.fcol h5{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:1.1rem;font-family:var(--sans);font-weight:700}
.fcol a{display:block;color:var(--on-dark-mute);font-size:.9rem;margin-bottom:.7rem;transition:color .25s}
.fcol a:hover{color:var(--cream)}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:16px}
.fbot p{color:var(--on-dark-mute);font-size:.82rem}
.fbot .langs{display:flex;gap:18px}.fbot .langs a{color:var(--on-dark-mute);font-size:.82rem;transition:color .25s}.fbot .langs a:hover{color:var(--cream)}

/* ===== reveal ===== */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .navlinks{display:none}
  .navtoggle{display:block}
  header.nav-open{background:rgba(11,8,6,.97);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line-d)}
  header.nav-open .navlinks{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:rgba(11,8,6,.98);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line-d);padding:6px 0 10px}
  header.nav-open .navlinks a{padding:13px 32px;font-size:1rem;color:var(--cream)}
  header.nav-open .navlinks a::after{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .hero{padding:140px 0 70px}
  .section{padding:76px 0}
  .frow{grid-template-columns:1fr}.form{padding:26px}
  .steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}.rv{opacity:1;transform:none}}