@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  --bg: #070b09;
  --bg-soft: #0b1210;
  --panel: #101814;
  --panel-2: #131e19;
  --line: rgba(174, 232, 44, .19);
  --line-soft: rgba(255, 255, 255, .08);
  --lime: #aee82c;
  --green: #73c900;
  --green-deep: #418c00;
  --text: #f7faf8;
  --muted: #a2aea8;
  --max: 1200px;
  --display: 'Outfit', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 10% 5%, rgba(115,201,0,.1),transparent 26%), radial-gradient(circle at 95% 35%,rgba(174,232,44,.07),transparent 25%), linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: auto,auto,52px 52px,52px 52px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.tutorial-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; background: rgba(255,255,255,.04); }
.tutorial-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--green),var(--lime)); box-shadow: 0 0 15px rgba(174,232,44,.75); }
.tutorial-header { position: sticky; top: 0; z-index: 50; min-height: 78px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 24px; padding: 12px max(18px,calc((100vw - var(--max))/2)); border-bottom: 1px solid var(--line-soft); background: rgba(7,11,9,.86); backdrop-filter: blur(18px); }
.tutorial-brand img { width: 152px; height: 52px; object-fit: contain; object-position: left center; }
.tutorial-header-title strong,.tutorial-header-title span { display: block; }.tutorial-header-title strong{font:800 17px var(--display)}.tutorial-header-title span{color:var(--muted);font-size:12px}
.tutorial-header-actions { display: flex; align-items: center; gap: 12px; }
.secure-indicator { display: inline-flex; align-items: center; gap: 8px; color: #d6dfda; font-size: 12px; font-weight: 700; white-space: nowrap; }.secure-indicator i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; border: 1px solid transparent; border-radius: 14px; font-size: 14px; font-weight: 800; transition: transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }.button-primary{color:#091006;background:linear-gradient(135deg,var(--lime),#7ed600);box-shadow:0 12px 34px rgba(126,214,0,.18)}.button-primary:hover{box-shadow:0 16px 42px rgba(126,214,0,.28)}.button-ghost{border-color:var(--line);background:rgba(255,255,255,.035);color:#fff}.button-ghost:hover{background:rgba(174,232,44,.08);border-color:rgba(174,232,44,.38)}.button-small{min-height:44px;margin-top:22px;padding:10px 17px;color:#091006;background:var(--lime)}

main { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.tutorial-hero { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 40px; padding: 72px 0 60px; }
.section-kicker { display: inline-block; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.hero-copy h1 { max-width: 650px; margin: 18px 0 22px; font:900 clamp(48px,7vw,88px)/.94 var(--display); letter-spacing: -.055em; }.hero-copy h1 em{display:block;color:var(--lime);font-style:normal;text-shadow:0 0 38px rgba(174,232,44,.16)}
.hero-copy>p { max-width: 590px; margin: 0; color: #b5c0ba; font-size: clamp(17px,2vw,21px); }
.benefit-list { display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 34px; }.benefit-list span{padding:9px 13px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.035);font-size:12px;font-weight:750}
.hero-visual { position:relative; min-height:620px; display:flex; align-items:flex-end; justify-content:center; }.hero-visual img{position:relative;z-index:2;max-height:650px;width:auto;object-fit:contain;filter:drop-shadow(0 28px 42px rgba(0,0,0,.65))}.hero-glow{position:absolute;inset:16% 8% 8%;border-radius:50%;background:rgba(113,196,0,.16);filter:blur(70px)}
.hero-float { position:absolute;z-index:3;padding:10px 14px;border:1px solid rgba(174,232,44,.3);border-radius:12px;background:rgba(8,14,10,.82);box-shadow:0 12px 28px rgba(0,0,0,.28);backdrop-filter:blur(10px);font-size:12px;font-weight:800}.hero-float-top{right:0;top:25%}.hero-float-bottom{left:2%;bottom:16%;color:var(--lime)}

.tutorial-intro { max-width: 760px; margin: 80px auto 64px; text-align: center; }.tutorial-intro h2,.security-copy h2,.full-guide h2,.help-section h2{margin:12px 0 14px;font:850 clamp(34px,5vw,58px)/1 var(--display);letter-spacing:-.04em}.tutorial-intro p,.security-copy p,.full-guide p,.help-section p{margin:0;color:var(--muted);font-size:16px}
.steps { position: relative; display: grid; gap: 56px; padding: 0 0 90px; }.steps-track{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.055)}.steps-track span{display:block;width:100%;height:100%;transform:scaleY(0);transform-origin:top;background:linear-gradient(var(--lime),var(--green));box-shadow:0 0 14px rgba(174,232,44,.5)}
.tutorial-step { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;min-height:520px;padding:34px;border:1px solid var(--line-soft);border-radius:24px;background:linear-gradient(135deg,rgba(18,29,23,.94),rgba(10,16,13,.96));box-shadow:0 24px 70px rgba(0,0,0,.24)}.tutorial-step.reverse .step-visual{order:2}.tutorial-step.reverse .step-copy{order:1}
.tutorial-step::before{content:attr(data-step);position:absolute;left:50%;top:-18px;translate:-50% 0;width:38px;height:38px;display:grid;place-items:center;border:4px solid var(--bg);border-radius:50%;color:#081005;background:var(--lime);font:900 13px var(--display);box-shadow:0 0 24px rgba(174,232,44,.27)}
.step-visual { position:relative;overflow:hidden;min-height:450px;border:1px solid var(--line);border-radius:20px;background:#020504;box-shadow:0 18px 44px rgba(0,0,0,.32)}.step-visual img{width:100%;height:100%;min-height:450px;max-height:590px;object-fit:cover;object-position:center top}.step-image-label{position:absolute;left:12px;bottom:12px;padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:9px;color:#dce7e0;background:rgba(3,7,5,.8);font-size:10px;font-weight:750;backdrop-filter:blur(8px)}
.step-number{display:block;color:rgba(174,232,44,.13);font:900 clamp(70px,9vw,120px)/.7 var(--display);letter-spacing:-.06em}.step-label{display:block;margin:24px 0 8px;color:var(--lime);font-size:11px;font-weight:900;letter-spacing:.14em}.step-copy h3{max-width:460px;margin:0 0 18px;font:850 clamp(31px,4vw,50px)/1.03 var(--display);letter-spacing:-.04em}.step-copy>p{max-width:500px;margin:0;color:#b0bcb5;font-size:17px}.step-tip{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:14px;border:1px solid rgba(174,232,44,.16);border-radius:14px;color:#dce6df;background:rgba(174,232,44,.045);font-size:13px}.step-tip span{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:#0a1107;background:var(--lime);font-weight:900}.step-tip strong{font-weight:700}
.terminal-pulse{position:absolute;left:52%;bottom:8%;width:25px;height:25px;border-radius:50%;border:2px solid var(--lime);animation:terminalPulse 1.8s ease-out infinite}.finish-check{position:absolute;right:16px;top:16px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#091006;background:var(--lime);font-size:26px;font-weight:900;box-shadow:0 0 0 0 rgba(174,232,44,.5);animation:finishPulse 2.4s ease-out infinite}

.security-section { display:grid;grid-template-columns:auto 1fr 1.15fr;gap:28px;align-items:center;margin:70px 0;padding:42px;border:1px solid rgba(174,232,44,.25);border-radius:24px;background:radial-gradient(circle at 5% 50%,rgba(174,232,44,.12),transparent 28%),linear-gradient(135deg,#111b16,#0a100d);box-shadow:0 24px 70px rgba(0,0,0,.28)}.security-icon{width:78px;height:78px;display:grid;place-items:center;border:1px solid var(--line);border-radius:20px;color:var(--lime);font-size:42px;background:rgba(174,232,44,.05)}.security-section ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.security-section li{display:flex;gap:10px;color:#c4cec8;font-size:13px;font-weight:600}.security-section li i{color:var(--lime);font-style:normal}
.full-guide { display:grid;grid-template-columns:.75fr 1.25fr;gap:42px;align-items:start;margin:90px 0;padding:34px;border:1px solid var(--line-soft);border-radius:24px;background:var(--panel)}.full-guide div{position:sticky;top:120px}.full-guide a{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#020504;box-shadow:0 18px 50px rgba(0,0,0,.32)}.full-guide img{width:100%;height:auto;transition:transform .35s ease}.full-guide a:hover img{transform:scale(1.012)}
.help-section { margin:100px 0 60px;padding:60px 30px;border-radius:26px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(174,232,44,.14),transparent 48%),#101814;border:1px solid var(--line)}.help-section p{max-width:620px;margin:0 auto}.help-section>div{display:flex;justify-content:center;gap:12px;margin-top:30px}
.tutorial-footer { display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:38px max(20px,calc((100vw - var(--max))/2));border-top:1px solid var(--line-soft);background:#040706}.tutorial-footer img{width:145px;height:48px;object-fit:contain;object-position:left}.tutorial-footer p{margin:8px 0 0;color:var(--muted);font-size:12px}.tutorial-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:20px}.tutorial-footer nav a{color:#bdc8c1;font-size:12px;font-weight:700}.tutorial-footer nav a:hover{color:var(--lime)}.tutorial-footer small{grid-column:1/-1;color:#69736d;font-size:10px;letter-spacing:.12em}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease,transform .65s ease; }.reveal.visible{opacity:1;transform:none}
@keyframes terminalPulse{0%{box-shadow:0 0 0 0 rgba(174,232,44,.65)}75%,100%{box-shadow:0 0 0 24px rgba(174,232,44,0)}}
@keyframes finishPulse{0%,60%{box-shadow:0 0 0 0 rgba(174,232,44,.45)}100%{box-shadow:0 0 0 18px rgba(174,232,44,0)}}

@media (max-width: 920px) {
  .tutorial-header{grid-template-columns:145px 1fr auto}.tutorial-header-title span,.secure-indicator{display:none}.tutorial-brand img{width:130px}.tutorial-hero{grid-template-columns:1fr;min-height:auto;padding-top:60px}.hero-copy{text-align:center}.hero-copy h1,.hero-copy>p{margin-left:auto;margin-right:auto}.benefit-list{justify-content:center}.hero-visual{min-height:520px}.hero-visual img{max-height:550px}.tutorial-step{gap:38px;padding:25px}.step-visual,.step-visual img{min-height:390px}.security-section{grid-template-columns:auto 1fr}.security-section ul{grid-column:1/-1}.full-guide{grid-template-columns:1fr}.full-guide div{position:static}.steps-track{left:18px}.tutorial-step::before{left:18px}
}

@media (max-width: 680px) {
  html{scroll-padding-top:72px}.tutorial-header{min-height:66px;grid-template-columns:120px 1fr;padding:8px 16px}.tutorial-brand img{width:116px;height:45px}.tutorial-header-title{display:none}.tutorial-header-actions{justify-content:flex-end}.tutorial-header-actions .button{min-height:42px;padding:8px 13px;font-size:12px}.tutorial-hero{gap:16px;padding:50px 0 30px}.hero-copy h1{font-size:clamp(44px,14vw,64px)}.hero-copy>p{font-size:16px}.hero-copy .button{width:100%}.hero-visual{min-height:440px}.hero-visual img{max-height:470px}.hero-float{font-size:10px}.hero-float-top{right:-4px}.hero-float-bottom{left:-2px}.tutorial-intro{margin:74px auto 42px}.tutorial-intro h2,.security-copy h2,.full-guide h2,.help-section h2{font-size:36px}.steps{gap:36px;padding-left:18px}.tutorial-step,.tutorial-step.reverse{grid-template-columns:1fr;gap:28px;min-height:0;padding:16px;border-radius:20px}.tutorial-step .step-visual,.tutorial-step.reverse .step-visual{order:1}.tutorial-step .step-copy,.tutorial-step.reverse .step-copy{order:2;padding:3px 4px 8px}.tutorial-step::before{left:-18px;top:30px}.steps-track{left:0}.step-visual,.step-visual img{min-height:0}.step-visual img{height:auto;max-height:none;object-fit:contain}.step-number{font-size:72px}.step-label{margin-top:20px}.step-copy h3{font-size:34px}.step-copy>p{font-size:15px}.security-section{grid-template-columns:1fr;padding:26px 20px}.security-section ul{grid-column:auto}.security-icon{width:60px;height:60px}.full-guide{margin:70px 0;padding:20px}.help-section{margin:70px 0 40px;padding:42px 20px}.help-section>div{flex-direction:column}.tutorial-footer{grid-template-columns:1fr;padding:32px 20px}.tutorial-footer nav{justify-content:flex-start}.terminal-pulse{width:18px;height:18px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.terminal-pulse,.finish-check{animation:none}.button,.full-guide img{transition:none}
}