:root{
  --bg:#111111;
  --bg-alt:#1a1a18;
  --fg:#f0ece5;
  --accent:#8b5cf6;
  --border:#282826;
  --muted:#888880;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#8b5cf6 100%);
  --grad-2:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);
  --glass:rgba(240,236,229,0.03);
  --border-rule:1px solid var(--border);

  /* legacy mappings */
  --blue:var(--accent);
  --purple:var(--accent);
  --cyan:var(--accent);
  --navy:var(--bg-alt);
  --black:var(--bg);
  --white:var(--fg);
  --slate:var(--muted);
  --green:var(--accent);
  --orange:var(--accent);
  --pink:var(--accent);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow','Inter',sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.55;
  overflow-x:hidden;
  font-feature-settings:"ss01","ss02";
}
body.modal-open{overflow:hidden}

h1,h2,h3,h4,h5{
  font-family:'Barlow','Space Grotesk',sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  text-transform:none;
}
h1{font-weight:900;letter-spacing:-0.035em}
h2{font-weight:800;letter-spacing:-0.025em}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;filter:grayscale(0.15) contrast(1.05)}

.container{max-width:1320px;margin:0 auto;padding:0 48px}

.gradient-text{
  color:var(--accent);
  background:none;
  -webkit-text-fill-color:var(--accent);
}

/* HEADER */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(17,17,17,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--border-rule);
  transition:all .3s;
}
.site-header.shrink{background:rgba(17,17,17,0.97)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.logo{
  font-family:'Barlow','Space Grotesk',sans-serif;
  font-weight:900;font-size:20px;color:var(--fg);
  letter-spacing:-0.02em;text-transform:uppercase;
}
.main-nav{display:flex;gap:26px}
.main-nav a{
  font-family:'IBM Plex Mono','JetBrains Mono',monospace;
  font-size:11px;color:var(--muted);position:relative;
  font-weight:500;transition:color .3s;
  text-transform:uppercase;letter-spacing:0.12em;
}
.main-nav a:hover,.main-nav a.active{color:var(--fg)}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--accent);transition:width .3s;
}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}

.btn{
  display:inline-block;padding:14px 26px;border-radius:0;
  font-family:'IBM Plex Mono','JetBrains Mono',monospace;
  font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:0.14em;
  transition:all .25s;cursor:pointer;border:none;
}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:none;
  border:1px solid var(--accent);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:#a78bfa;border-color:#a78bfa;
  box-shadow:0 8px 0 -2px rgba(139,92,246,0.3);
}
.btn-secondary{
  background:transparent;color:var(--fg);
  border:1px solid var(--border);
}
.btn-secondary:hover{
  background:var(--bg-alt);border-color:var(--fg);
}

.hamburger{display:none;background:none;border:none;color:var(--fg);font-size:24px;cursor:pointer}

/* HERO */
.hero{
  position:relative;padding:180px 0 120px;min-height:100vh;
  display:flex;align-items:center;overflow:hidden;
  background:var(--bg);
  border-bottom:var(--border-rule);
}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(240,236,229,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,236,229,0.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg,black 0%,transparent 90%);
  animation:none;
}
.hero-particles{display:none}

.hero-content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:60px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px;border-radius:0;
  background:transparent;
  border:1px solid var(--border);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--muted);
  margin-bottom:28px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.18em;
}
.hero-badge::before{
  content:"";width:8px;height:8px;background:var(--accent);
  display:inline-block;
}
.hero h1{
  font-size:clamp(2.8rem,7vw,6rem);
  font-weight:900;
  margin-bottom:24px;
  letter-spacing:-0.04em;
  line-height:0.95;
}
.hero h1 .gradient-text{display:inline-block}
.hero-sub{
  font-size:19px;color:var(--fg);
  margin-bottom:36px;max-width:580px;
  line-height:1.5;font-weight:400;
  border-left:3px solid var(--accent);
  padding-left:18px;
}
.hero-buttons{display:flex;gap:14px;margin-bottom:56px;flex-wrap:wrap}
.hero-stats{
  display:flex;gap:0;
  border-top:var(--border-rule);
  padding-top:24px;
}
.hero-stats div{
  display:flex;flex-direction:column;
  padding-right:32px;margin-right:32px;
  border-right:var(--border-rule);
}
.hero-stats div:last-child{border-right:none;margin-right:0;padding-right:0}
.hero-stats strong{
  font-family:'Barlow',sans-serif;
  font-size:34px;color:var(--fg);
  font-weight:800;letter-spacing:-0.02em;
}
.hero-stats span{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.14em;
  margin-top:4px;
}

/* ============================================ */
/* HERO SHOE STAGE — PNG-based 3D showcase       */
/* ============================================ */
.hero-shoe-stage{
  position:relative;
  height:560px;
  perspective:1600px;
  perspective-origin:50% 55%;
  display:flex;align-items:center;justify-content:center;
}

/* large CJK watermark behind shoe */
.shoe-watermark{
  position:absolute;
  font-family:'Noto Sans SC',sans-serif;
  font-size:340px;font-weight:900;
  color:var(--bg-alt);
  line-height:1;z-index:0;
  user-select:none;pointer-events:none;
  letter-spacing:-0.05em;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-shadow:0 0 60px rgba(139,92,246,0.06);
}

/* perspective floor grid */
.shoe-grid-floor{
  position:absolute;left:50%;bottom:50px;
  width:600px;height:240px;
  transform:translateX(-50%) rotateX(72deg);
  transform-style:preserve-3d;
  background-image:
    linear-gradient(rgba(139,92,246,0.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,0.22) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  z-index:1;
  opacity:0.75;
}

/* rotating ring platform */
.shoe-platform{
  position:absolute;left:50%;top:55%;
  width:420px;height:420px;
  transform:translate(-50%,-30%) rotateX(72deg);
  transform-style:preserve-3d;
  z-index:1;
  animation:platformSpin 26s linear infinite;
  pointer-events:none;
}
@keyframes platformSpin{
  to{transform:translate(-50%,-30%) rotateX(72deg) rotateZ(360deg)}
}
.platform-ring{
  position:absolute;inset:0;
  border:1px dashed rgba(139,92,246,0.4);
  border-radius:50%;
}
.platform-ring-1{inset:22%}
.platform-ring-2{inset:10%;border-style:solid;border-color:rgba(139,92,246,0.22)}
.platform-ring-3{inset:0;border-color:rgba(139,92,246,0.55);border-style:dotted}

/* shoe image wrap */
.hero-shoe-wrap{
  position:relative;
  z-index:4;
  width:min(110%,540px);
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  animation:shoeFloat 6s ease-in-out infinite;
}
@keyframes shoeFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-16px) rotate(-2deg)}
}

.hero-shoe-image{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.55))
    drop-shadow(0 8px 12px rgba(139,92,246,0.18))
    contrast(1.05) saturate(1.05);
  transform:rotate(-4deg);
  transition:transform .6s ease;
}
.hero-shoe-wrap:hover .hero-shoe-image{
  transform:rotate(-2deg) scale(1.03);
}

/* soft ground shadow under shoe */
.hero-shoe-shadow{
  position:absolute;
  left:50%;bottom:-10px;
  width:78%;height:34px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 70%);
  filter:blur(8px);
  z-index:-1;
  animation:shadowPulse 6s ease-in-out infinite;
}
@keyframes shadowPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:0.75}
  50%{transform:translateX(-50%) scale(0.86);opacity:0.55}
}

/* floating spec labels */
.shoe-spec{
  position:absolute;
  padding:7px 13px;
  background:var(--bg);
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.14em;
  z-index:6;
  white-space:nowrap;
  animation:specFloat 5s ease-in-out infinite;
}
.shoe-spec::before{
  content:"";position:absolute;
  width:28px;height:1px;background:var(--accent);
  top:50%;
}
.spec-leather{top:10%;left:-2%;animation-delay:0s}
.spec-leather::before{right:-30px}
.spec-welt{top:62%;right:-2%;animation-delay:1.2s}
.spec-welt::before{left:-30px}
.spec-riga{top:22%;right:0%;animation-delay:2s}
.spec-riga::before{left:-30px}
.spec-sole{bottom:14%;left:0%;animation-delay:3s}
.spec-sole::before{right:-30px}
@keyframes specFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* accent geometry */
.shoe-accent{
  position:absolute;
  pointer-events:none;
  z-index:2;
}
.shoe-accent-1{
  top:8%;left:8%;
  width:80px;height:80px;
  border:1px solid var(--accent);
  opacity:0.4;
  animation:accentSpin 18s linear infinite;
}
.shoe-accent-2{
  bottom:18%;right:10%;
  width:50px;height:50px;
  border:1px dashed var(--accent);
  border-radius:50%;
  opacity:0.5;
  animation:accentSpin 12s linear infinite reverse;
}
.shoe-accent-3{
  top:14%;right:18%;
  font-size:22px;color:var(--accent);
  opacity:0.55;
  animation:accentBob 4s ease-in-out infinite;
}
@keyframes accentSpin{to{transform:rotate(360deg)}}
@keyframes accentBob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(20deg)}
}

/* legacy orb classes hidden */
.ai-orb,.orb-core,.orb-ring,.orb-node,.hero-orb-wrapper{display:none}

/* SECTIONS */
.section{padding:120px 0;position:relative;border-bottom:var(--border-rule)}
.section-dark{background:var(--bg-alt)}
.section-head{
  text-align:left;margin-bottom:72px;max-width:none;
  border-top:3px solid var(--accent);
  padding-top:24px;
  display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:end;
}
.section-head .eyebrow{grid-column:1}
.section-head h2{grid-column:1 / -1;font-size:clamp(2rem,5vw,4rem);margin-bottom:0;max-width:14ch}
.section-head p{
  grid-column:2;color:var(--muted);font-size:16px;
  align-self:end;max-width:48ch;
  border-left:1px solid var(--border);padding-left:20px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:0;background:none;border:none;
  font-family:'IBM Plex Mono',monospace;
  color:var(--accent);font-size:11px;
  font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;margin-bottom:12px;
}
.eyebrow::before{
  content:"§";color:var(--accent);font-weight:700;
}

/* PAGE HERO */
.page-hero{
  padding:200px 0 100px;text-align:left;
  background:var(--bg);position:relative;
  border-bottom:var(--border-rule);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(240,236,229,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,236,229,0.03) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg,black 0%,transparent 90%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{
  font-size:clamp(2.4rem,6vw,5rem);
  margin-bottom:24px;
  letter-spacing:-0.035em;line-height:0.96;
  max-width:18ch;
}
.page-hero p{
  color:var(--muted);font-size:18px;
  max-width:60ch;margin:0 0 32px;
  border-left:3px solid var(--accent);padding-left:18px;
}

/* BENTO */
.bento-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  border-top:var(--border-rule);
  border-left:var(--border-rule);
}
.bento-card{
  padding:36px 32px;border-radius:0;
  background:transparent;
  border-right:var(--border-rule);
  border-bottom:var(--border-rule);
  position:relative;overflow:hidden;transition:all .3s;
  display:block;cursor:pointer;
}
.bento-card::before{display:none}
.bento-card:hover{
  transform:none;
  background:var(--bg-alt);
}
.bento-card:hover .bento-icon{color:var(--accent)}
.bento-icon{
  width:auto;height:auto;border-radius:0;
  display:flex;align-items:center;justify-content:flex-start;
  font-size:32px;background:none;
  margin-bottom:24px;color:var(--fg);
  transition:color .3s;
}
.bento-card h3{
  font-size:22px;margin-bottom:12px;
  font-weight:800;letter-spacing:-0.01em;
}
.bento-card p{color:var(--muted);font-size:14px;margin-bottom:16px;line-height:1.55}
.bento-link{
  font-family:'IBM Plex Mono',monospace;
  color:var(--accent);font-weight:600;font-size:11px;
  display:inline-block;cursor:pointer;
  text-transform:uppercase;letter-spacing:0.16em;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.bento-link:hover{color:var(--fg);border-color:var(--fg)}

/* AI GRID */
.ai-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  border-top:var(--border-rule);
  border-left:var(--border-rule);
}
.ai-card{
  background:transparent;
  border-right:var(--border-rule);
  border-bottom:var(--border-rule);
  border-radius:0;
  overflow:hidden;transition:all .3s;
}
.ai-card:hover{transform:none;background:var(--bg-alt)}
.ai-card-image{
  width:100%;height:220px;object-fit:cover;
  border-bottom:var(--border-rule);
}
.ai-card-body{padding:24px 28px 28px}
.tag{
  display:inline-block;padding:3px 8px;border-radius:0;
  background:transparent;border:1px solid var(--accent);
  color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:14px;
}
.ai-card-body h4{
  font-size:20px;margin-bottom:10px;
  font-weight:800;letter-spacing:-0.01em;
}
.ai-card-body p{color:var(--muted);font-size:14px;margin-bottom:14px;line-height:1.55}

/* CODING */
.coding-section{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.terminal{
  border-radius:0;background:var(--bg-alt);
  border:var(--border-rule);
  overflow:hidden;box-shadow:none;
}
.terminal-head{
  display:flex;align-items:center;gap:8px;
  padding:14px 20px;
  background:transparent;
  border-bottom:var(--border-rule);
}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#444}.dot.yellow{background:#444}.dot.green{background:var(--accent)}
.terminal-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--muted);margin-left:10px;
  text-transform:uppercase;letter-spacing:0.1em;
}
.terminal-body{
  padding:28px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;color:var(--fg);overflow-x:auto;
  line-height:1.7;
}
.c-key{color:var(--accent)}.c-var{color:var(--fg)}.c-str{color:var(--fg);opacity:0.75}.c-fn{color:var(--accent)}

.coding-list{display:flex;flex-direction:column;gap:0;border-top:var(--border-rule)}
.code-topic{
  display:flex;gap:24px;padding:28px 0;border-radius:0;
  background:transparent;
  border-bottom:var(--border-rule);
  transition:all .3s;
}
.code-topic:hover{transform:none;padding-left:12px}
.code-topic>span{
  font-family:'IBM Plex Mono',monospace;color:var(--accent);
  font-size:14px;font-weight:600;flex-shrink:0;
  letter-spacing:0.12em;padding-top:4px;
}
.code-topic h4{font-size:19px;margin-bottom:8px;font-weight:800}
.code-topic p{color:var(--muted);font-size:14px}

/* PRODUCTIVITY */
.productivity-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0;
  border-top:var(--border-rule);
  border-left:var(--border-rule);
}
.glass-card{
  padding:36px 28px;border-radius:0;text-align:left;
  background:transparent;
  border-right:var(--border-rule);
  border-bottom:var(--border-rule);
  backdrop-filter:none;transition:all .3s;
}
.glass-card:hover{transform:none;background:var(--bg-alt)}
.glass-card:hover .glass-icon{color:var(--accent)}
.glass-icon{font-size:32px;margin-bottom:18px;color:var(--fg);transition:color .3s}
.glass-card h4{font-size:18px;margin-bottom:10px;font-weight:800}
.glass-card p{color:var(--muted);font-size:14px}

/* CAREER */
.career-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.career-card{
  padding:0;border-radius:0;overflow:hidden;
  background:transparent;
  border:var(--border-rule);
  transition:all .3s;
}
.career-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.career-image{width:100%;height:220px;object-fit:cover;border-bottom:var(--border-rule)}
.career-card h4{padding:22px 24px 8px;font-size:20px;font-weight:800}
.career-card p{padding:0 24px;color:var(--muted);font-size:14px;margin-bottom:18px}
.progress{
  height:2px;background:var(--border);
  margin:0 24px 24px;border-radius:0;overflow:hidden;
}
.progress-bar{height:100%;background:var(--accent);border-radius:0;transition:width 1s}

/* TUTORIAL */
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:var(--border-rule);border-left:var(--border-rule)}
.tutorial-card{
  background:transparent;
  border-right:var(--border-rule);
  border-bottom:var(--border-rule);
  border-radius:0;
  overflow:hidden;transition:all .3s;
}
.tutorial-card:hover{transform:none;background:var(--bg-alt)}
.tutorial-image{width:100%;height:240px;object-fit:cover;border-bottom:var(--border-rule)}
.tutorial-body{padding:24px 28px 28px}
.tutorial-body h4{font-size:20px;margin-bottom:10px;font-weight:800}
.tutorial-body p{color:var(--muted);font-size:14px}

/* LEARN CTA */
.learn-cta-section{
  background:var(--bg-alt);
  border-top:var(--border-rule);border-bottom:var(--border-rule);
}
.learn-cta-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;
  align-items:start;
  max-width:1240px;margin:0 auto;
}
.learn-cta-text h2{
  font-size:clamp(2rem,4.5vw,3.4rem);
  margin-bottom:20px;font-weight:900;letter-spacing:-0.03em;
  line-height:0.98;
}
.learn-cta-text p{color:var(--muted);margin-bottom:20px;font-size:17px;line-height:1.6}
.learn-cta-features{display:flex;flex-direction:column;gap:0;margin-top:28px;border-top:var(--border-rule)}
.learn-cta-features li{
  display:flex;align-items:flex-start;gap:14px;
  color:var(--fg);font-size:14px;
  list-style:none;padding:16px 0;
  border-bottom:var(--border-rule);
}
.learn-cta-features li::before{
  content:"→";display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;border-radius:0;background:none;
  color:var(--accent);font-size:16px;font-weight:700;flex-shrink:0;
}
.learn-cta-form{
  background:var(--bg);
  border:var(--border-rule);
  border-radius:0;padding:36px;
}
.learn-cta-form h3{
  font-size:22px;margin-bottom:8px;
  font-weight:800;letter-spacing:-0.01em;
}
.learn-cta-form .form-subtitle{
  color:var(--muted);font-size:13px;margin-bottom:24px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.1em;
}
.learn-cta-form .form-field{margin-bottom:14px}
.learn-cta-form .form-field input,
.learn-cta-form .form-field select,
.learn-cta-form .form-field textarea{
  width:100%;padding:14px 16px;border-radius:0;
  background:transparent;border:1px solid var(--border);color:var(--fg);
  font-family:'Barlow',sans-serif;font-size:14px;outline:none;resize:vertical;
  transition:border-color .2s;
}
.learn-cta-form .form-field input:focus,
.learn-cta-form .form-field select:focus,
.learn-cta-form .form-field textarea:focus{border-color:var(--accent)}
.learn-cta-form .form-field select option{background:var(--bg);color:var(--fg)}
.learn-cta-form button{width:100%;margin-top:6px}

/* STATS */
.stats-section{
  background:var(--bg);
  border-top:3px solid var(--accent);
  padding:80px 0;
}
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;text-align:left;
}
.stats-grid .stat{
  padding:0 32px;border-right:var(--border-rule);
}
.stats-grid .stat:last-child{border-right:none}
.stat h3{
  font-family:'Barlow',sans-serif;
  font-size:64px;font-weight:900;
  background:none;-webkit-text-fill-color:var(--accent);
  color:var(--accent);
  margin-bottom:8px;letter-spacing:-0.04em;line-height:1;
}
.stat p{
  color:var(--muted);font-size:12px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.16em;
}

/* TESTIMONIAL */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:var(--border-rule);border-left:var(--border-rule)}
.testimonial{
  padding:36px 32px;border-radius:0;
  background:transparent;
  border-right:var(--border-rule);
  border-bottom:var(--border-rule);
  position:relative;
}
.testimonial::before{
  content:"\201C";
  position:absolute;top:12px;right:24px;
  font-family:'Barlow',serif;
  font-size:80px;color:var(--accent);
  line-height:1;opacity:0.5;
}
.testimonial p{
  color:var(--fg);font-size:17px;font-style:normal;
  margin-bottom:24px;line-height:1.5;
  font-weight:500;letter-spacing:-0.01em;
}
.t-author{display:flex;flex-direction:column;border-top:var(--border-rule);padding-top:14px}
.t-author strong{
  color:var(--fg);font-size:14px;font-weight:700;
  letter-spacing:-0.01em;
}
.t-author span{
  color:var(--muted);font-size:11px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.14em;
  margin-top:2px;
}

/* NEWSLETTER */
.newsletter{
  padding:120px 0;
  background:var(--bg-alt);
  border-top:3px solid var(--accent);
}
.newsletter-inner{text-align:left;max-width:880px;margin:0 auto}
.newsletter h2{
  font-size:clamp(2rem,4.5vw,3.6rem);
  margin-bottom:16px;font-weight:900;letter-spacing:-0.035em;
  line-height:0.98;
}
.newsletter p{
  color:var(--muted);margin-bottom:36px;font-size:17px;
  max-width:54ch;
}
.newsletter-form{display:flex;gap:0;flex-wrap:wrap;justify-content:flex-start}
.newsletter-form input{
  flex:1;min-width:240px;padding:16px 20px;border-radius:0;
  background:transparent;border:1px solid var(--border);color:var(--fg);
  font-family:'Barlow',sans-serif;font-size:15px;outline:none;
}
.newsletter-form input:focus{border-color:var(--accent)}
.newsletter-form .btn{border-radius:0}

/* TOOLS CONTROLS */
.tools-controls{
  display:flex;flex-direction:column;gap:20px;
  align-items:flex-start;margin-top:36px;
  padding-top:28px;border-top:var(--border-rule);
}
.search-input{
  width:100%;max-width:520px;padding:14px 20px;border-radius:0;
  background:transparent;border:1px solid var(--border);color:var(--fg);
  font-family:'Barlow',sans-serif;font-size:14px;outline:none;
}
.search-input:focus{border-color:var(--accent)}
.filters{display:flex;gap:0;flex-wrap:wrap;justify-content:flex-start}
.filter-btn{
  padding:10px 18px;border-radius:0;
  background:transparent;
  border:1px solid var(--border);
  border-right:none;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;cursor:pointer;transition:all .2s;
  font-weight:500;text-transform:uppercase;letter-spacing:0.14em;
}
.filter-btn:last-child{border-right:1px solid var(--border)}
.filter-btn:hover{color:var(--fg);background:var(--bg-alt)}
.filter-btn.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* TIMELINE */
.timeline{position:relative;max-width:880px;margin:0 auto;padding-left:36px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--accent)}
.timeline-item{position:relative;padding-bottom:44px}
.timeline-dot{
  position:absolute;left:-36px;top:6px;
  width:18px;height:18px;border-radius:0;
  background:var(--accent);box-shadow:none;
  transform:rotate(45deg);
}
.timeline-content h4{margin-bottom:8px;font-size:20px;font-weight:800;letter-spacing:-0.01em}
.timeline-content p{color:var(--muted);font-size:15px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-text h2{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:20px;font-weight:900;letter-spacing:-0.03em}
.about-text p{color:var(--muted);margin-bottom:18px;font-size:16px;line-height:1.65}
.about-collab-image{border-radius:0;width:100%;border:var(--border-rule)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.contact-form{
  background:var(--bg-alt);
  border:var(--border-rule);
  border-radius:0;padding:40px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{margin-bottom:18px}
.form-field label{
  display:block;font-size:11px;color:var(--accent);
  margin-bottom:8px;font-weight:600;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.14em;
}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:12px 16px;border-radius:0;
  background:transparent;border:1px solid var(--border);color:var(--fg);
  font-family:'Barlow',sans-serif;font-size:15px;outline:none;resize:vertical;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--accent)}
.contact-info{display:flex;flex-direction:column;gap:0;border-top:var(--border-rule)}
.info-card{
  padding:24px 0;border-radius:0;
  background:transparent;
  border-bottom:var(--border-rule);
}
.info-card h4{
  margin-bottom:8px;font-size:13px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.14em;
  color:var(--accent);font-weight:600;
}
.info-card p{color:var(--fg);font-size:15px}

/* FAQ */
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:0;border-top:var(--border-rule)}
.faq-item{
  padding:24px 0;border-radius:0;
  background:transparent;
  border-bottom:var(--border-rule);
}
.faq-item summary{
  cursor:pointer;font-weight:700;
  font-family:'Barlow',sans-serif;font-size:18px;
  letter-spacing:-0.01em;
  list-style:none;position:relative;padding-right:30px;
}
.faq-item summary::after{
  content:"+";position:absolute;right:0;top:-2px;
  color:var(--accent);font-size:22px;font-weight:400;
}
.faq-item[open] summary::after{content:"−"}
.faq-item p{color:var(--muted);font-size:15px;margin-top:14px;line-height:1.6}

/* LEGAL */
.legal-section{padding:80px 0 120px}
.legal-content{max-width:760px;margin:0 auto}
.legal-content h2{
  margin-top:40px;margin-bottom:14px;font-size:22px;
  color:var(--fg);font-weight:800;letter-spacing:-0.01em;
  padding-top:16px;border-top:var(--border-rule);
}
.legal-content h2:first-child{border-top:none;padding-top:0;margin-top:0}
.legal-content p,.legal-content li{color:var(--muted);margin-bottom:12px;font-size:15px;line-height:1.65}
.legal-content ul{padding-left:20px;margin-bottom:18px}
.legal-content a{color:var(--accent);text-decoration:underline}

/* FOOTER */
.site-footer{
  background:var(--bg);
  border-top:3px solid var(--accent);
  padding-top:72px;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:48px}
.footer-col h4,.footer-col h5{
  margin-bottom:18px;font-size:11px;color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.18em;font-weight:600;
}
.footer-col h4.logo{
  font-family:'Barlow',sans-serif;font-size:20px;
  color:var(--fg);letter-spacing:-0.02em;
  text-transform:uppercase;font-weight:900;
}
.footer-col p{color:var(--muted);font-size:14px;margin-bottom:12px;line-height:1.6}
.footer-col a{display:block;color:var(--fg);font-size:14px;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  border-top:var(--border-rule);
  padding:24px 0;text-align:left;color:var(--muted);
  font-size:11px;
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:0.14em;
}

/* REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:all .7s ease}
.reveal.in-view{opacity:1;transform:none}

/* ============================================ */
/* MODAL                                          */
/* ============================================ */
.tool-modal{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:flex-start;justify-content:center;
  padding:clamp(12px,3vw,40px) clamp(12px,3vw,20px);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.tool-modal.open{display:flex;animation:modalFadeIn .25s ease}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}

.tool-modal-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}

.tool-modal-dialog{
  position:relative;z-index:2;
  width:100%;max-width:720px;
  background:var(--bg);
  border:1px solid var(--accent);
  border-radius:0;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  animation:modalSlideUp .3s ease;
  margin:auto;
  max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;
}
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.tool-modal-close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:0;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--fg);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.tool-modal-close:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

.tool-modal-image-wrap{
  position:relative;width:100%;
  height:clamp(160px,28vw,240px);
  overflow:hidden;flex-shrink:0;
  border-bottom:var(--border-rule);
}
.tool-modal-image{width:100%;height:100%;object-fit:cover}
.tool-modal-image-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(17,17,17,0.7) 100%);
  pointer-events:none;
}
.tool-modal-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--bg);margin-bottom:0;
}

.tool-modal-body{
  padding:clamp(20px,3vw,36px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;
}
.tool-modal-body h3{
  font-size:clamp(22px,3vw,32px);margin-bottom:14px;
  background:none;-webkit-text-fill-color:var(--fg);
  color:var(--fg);
  word-break:break-word;
  font-weight:900;letter-spacing:-0.025em;
}
.tool-modal-desc{
  color:var(--muted);font-size:clamp(14px,1.6vw,15px);
  margin-bottom:28px;line-height:1.7;
  border-left:2px solid var(--accent);padding-left:16px;
}
.tool-modal-subtitle{
  font-size:11px;color:var(--accent);
  margin:24px 0 14px;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;text-transform:uppercase;letter-spacing:0.18em;
  border-top:var(--border-rule);padding-top:18px;
}
.tool-modal-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:10px;
}
.tool-modal-list li{
  display:flex;align-items:flex-start;gap:12px;
  color:var(--fg);font-size:clamp(13px,1.5vw,14px);
  line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;
}
.tool-modal-list li::before{
  content:"→";color:var(--accent);font-weight:700;
  flex-shrink:0;margin-top:1px;
}
.tool-modal-list-plain li::before{content:"§";color:var(--accent);font-size:14px}

.tool-modal-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:32px;padding-top:24px;
  border-top:var(--border-rule);flex-wrap:wrap;
}
.tool-modal-pricing{display:flex;flex-direction:column;min-width:0}
.tool-modal-pricing-label{
  font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:4px;
  font-family:'IBM Plex Mono',monospace;
}
.tool-modal-pricing strong{
  font-size:18px;color:var(--fg);
  font-family:'Barlow',sans-serif;font-weight:800;
  word-break:break-word;letter-spacing:-0.01em;
}

/* TABLET */
@media (max-width:960px){
  .hero-content,.coding-section,.about-grid,.contact-grid,.learn-cta-grid{grid-template-columns:1fr}
  .hero-shoe-stage{height:460px;margin-top:20px}
  .hero-shoe-wrap{width:min(90%,460px)}
  .shoe-grid-floor{width:500px;height:200px}
  .shoe-watermark{font-size:260px}
  .shoe-spec{font-size:9px;padding:5px 10px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section-head{grid-template-columns:1fr;gap:16px}
  .section-head p{grid-column:1;border-left:none;border-top:var(--border-rule);padding-left:0;padding-top:16px}
  .stats-grid .stat{padding:24px 0;border-right:none;border-bottom:var(--border-rule)}
  .stats-grid .stat:last-child{border-bottom:none}
  .tool-modal-dialog{max-width:90vw}
}

/* MOBILE */
@media (max-width:720px){
  .container{padding:0 24px}
  .main-nav{
    position:fixed;top:72px;left:0;right:0;
    flex-direction:column;background:var(--bg);
    backdrop-filter:none;padding:24px;gap:18px;
    transform:translateY(-150%);transition:transform .3s;
    border-bottom:var(--border-rule);
    align-items:flex-start;
  }
  .main-nav.open{transform:translateY(0)}
  .hamburger{display:block}
  .header-cta{display:none}
  .hero{padding:140px 0 80px}
  .section{padding:80px 0}
  .hero-stats{gap:0;flex-wrap:wrap}
  .hero-stats div{padding-right:20px;margin-right:20px}

  .hero-shoe-stage{height:380px}
  .hero-shoe-wrap{width:min(85%,360px)}
  .shoe-grid-floor{width:360px;height:160px;bottom:30px}
  .shoe-watermark{font-size:200px}
  .shoe-platform{width:320px;height:320px}
  .shoe-spec{display:none}
  .shoe-spec.spec-leather,.shoe-spec.spec-welt{display:inline-block;font-size:9px;padding:4px 8px}
  .spec-leather{top:4%;left:0%}
  .spec-welt{bottom:6%;right:0%;top:auto}
  .shoe-accent-1,.shoe-accent-2,.shoe-accent-3{display:none}

  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .timeline{padding-left:28px}
  .learn-cta-form{padding:28px}
  .stat h3{font-size:48px}

  .tool-modal{padding:16px 12px}
  .tool-modal-dialog{max-width:100%;max-height:calc(100vh - 32px)}
  .tool-modal-body{padding:24px 22px 28px}
  .tool-modal-image-wrap{height:180px}
  .tool-modal-body h3{font-size:24px}
  .tool-modal-close{top:12px;right:12px;width:36px;height:36px;font-size:15px}
  .tool-modal-footer{flex-direction:column;align-items:stretch;gap:14px}
  .tool-modal-footer .btn{text-align:center;width:100%}
  .tool-modal-pricing{align-items:flex-start}
}

@media (max-width:480px){
  .container{padding:0 20px}
  .tool-modal{padding:10px 8px}
  .tool-modal-dialog{max-height:calc(100vh - 20px)}
  .tool-modal-image-wrap{height:160px}
  .tool-modal-body{padding:22px 18px 24px}
  .tool-modal-body h3{font-size:21px;margin-bottom:12px}
  .tool-modal-desc{font-size:13.5px;margin-bottom:20px}
  .tool-modal-subtitle{font-size:11px;margin:18px 0 12px}
  .tool-modal-list li{font-size:13px;gap:10px}
  .tool-modal-tag{top:12px;left:12px}
  .tool-modal-close{top:10px;right:10px;width:34px;height:34px;font-size:14px}
  .tool-modal-footer{margin-top:24px;padding-top:20px}
}

@media (max-width:360px){
  .tool-modal-body{padding:18px 14px 22px}
  .tool-modal-body h3{font-size:19px}
  .tool-modal-image-wrap{height:140px}
}

@media (max-height:500px) and (orientation:landscape){
  .tool-modal{padding:10px}
  .tool-modal-dialog{max-height:calc(100vh - 20px);max-width:680px}
  .tool-modal-image-wrap{height:120px}
  .tool-modal-body{padding:20px 24px}
  .tool-modal-body h3{font-size:20px;margin-bottom:8px}
  .tool-modal-desc{margin-bottom:14px}
  .tool-modal-subtitle{margin:14px 0 8px}
  .tool-modal-footer{margin-top:18px;padding-top:14px}
}