:root{
    --ink:#0B0E14;
    --ink-2:#11151D;
    --ink-3:#171C26;
    --signal:#43F47C;
    --ember:#FF8A4C;
    --paper:#ECEEF2;
    --mute:#7B8492;
    --line: rgba(236,238,242,0.08);
    --radius: 0px;
    --nav-fade: rgba(11,14,20,0.9);
    --pixel-shadow: 4px 4px 0 0 rgba(0,0,0,0.45);
    --pixel-shadow-hover: 6px 6px 0 0 rgba(0,0,0,0.5);
  }
  html[data-theme="light"]{
    --ink:#F3F1EA;
    --ink-2:#FFFFFF;
    --ink-3:#ECE8DE;
    --signal:#0E8F4A;
    --ember:#D9621B;
    --paper:#161A1F;
    --mute:#6B6F76;
    --line: rgba(22,26,31,0.12);
    --nav-fade: rgba(243,241,234,0.92);
    --pixel-shadow: 4px 4px 0 0 rgba(22,26,31,0.15);
    --pixel-shadow-hover: 6px 6px 0 0 rgba(22,26,31,0.2);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  *{transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;}
  html{scroll-behavior:smooth;}
  body{
    background-color:var(--ink);
    background-image:
      radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 18px 18px;
    color:var(--paper);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition:background-color 0.5s ease, color 0.5s ease;
    image-rendering: pixelated;
  }
  .pixel{font-family:'Press Start 2P', monospace; image-rendering: pixelated;}

  .crenellation{
    height:14px; width:100%; background-color:var(--paper); opacity:0.16;
    position:absolute; left:0; top:0;
    -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14"><rect x="0" y="6" width="24" height="8"/><rect x="1" y="0" width="6" height="14"/><rect x="13" y="0" width="6" height="14"/></svg>');
    mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14"><rect x="0" y="6" width="24" height="8"/><rect x="1" y="0" width="6" height="14"/><rect x="13" y="0" width="6" height="14"/></svg>');
    -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
    -webkit-mask-size:24px 14px; mask-size:24px 14px;
  }
  .crenellation.bottom{top:auto; bottom:0; transform:scaleY(-1);}

  .shield-icon{
    display:inline-block; width:16px; height:18px; vertical-align:-3px; margin-right:8px; flex-shrink:0;
  }
  .shield-icon svg{width:100%; height:100%; image-rendering:pixelated;}

  .plaque{
    display:inline-block; background:var(--ink-3); border:2px solid var(--paper);
    box-shadow:3px 3px 0 0 rgba(0,0,0,0.4); padding:6px 14px; position:relative;
  }
  html[data-theme="light"] .plaque{box-shadow:3px 3px 0 0 rgba(22,26,31,0.18);}
  .plaque::before, .plaque::after{
    content:''; position:absolute; width:6px; height:6px; background:var(--paper); top:-2px;
  }
  .plaque::before{left:-2px;} .plaque::after{right:-2px;}
  .mono{font-family:'JetBrains Mono', monospace;}
  .display{font-family:'Space Grotesk', sans-serif;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 5%;
    background:linear-gradient(to bottom, var(--nav-fade), transparent 100%);
    backdrop-filter:blur(6px);
    transition:background 0.5s ease;
  }
  .logo{
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:15px; letter-spacing:0.5px;
    color:var(--paper); display:flex; align-items:center; gap:8px;
  }
  .logo .tower-icon{width:18px; height:18px; flex-shrink:0;}
  .logo .tower-icon svg{width:100%; height:100%; image-rendering:pixelated;}
  .logo b{color:var(--signal); font-weight:700;}
  .logo span{color:var(--signal);}
  .nav-links{display:flex; gap:32px; align-items:center;}
  .nav-links a{
    color:var(--mute); text-decoration:none; font-size:14px; font-weight:500;
    transition:color 0.25s;
  }
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--paper);}
  #langToggle{
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700;
    background:var(--ink-3); border:2px solid var(--paper); color:var(--signal);
    padding:8px 14px; border-radius:0; cursor:pointer; letter-spacing:1px;
    box-shadow: 3px 3px 0 0 var(--paper);
  }
  #langToggle:hover{border-color:var(--signal); transform:translate(-1px,-1px); box-shadow: 4px 4px 0 0 var(--signal);}
  #themeToggle{
    width:36px; height:36px; border-radius:0; border:2px solid var(--paper);
    background:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center;
    position:relative; transition:border-color 0.3s, background 0.5s ease;
    box-shadow: 3px 3px 0 0 var(--paper);
  }
  #themeToggle:hover{border-color:var(--signal); transform:translate(-1px,-1px); box-shadow: 4px 4px 0 0 var(--signal);}
  #themeToggle svg{width:16px; height:16px; color:var(--signal); transition:transform 0.5s ease, opacity 0.3s ease;}
  #themeToggle .icon-moon{position:absolute;}
  html[data-theme="dark"] #themeToggle .icon-sun, html:not([data-theme]) #themeToggle .icon-sun{opacity:0; transform:rotate(90deg) scale(0.5); position:absolute;}
  html[data-theme="dark"] #themeToggle .icon-moon, html:not([data-theme]) #themeToggle .icon-moon{opacity:1; transform:rotate(0) scale(1);}
  html[data-theme="light"] #themeToggle .icon-sun{opacity:1; transform:rotate(0) scale(1);}
  html[data-theme="light"] #themeToggle .icon-moon{opacity:0; transform:rotate(-90deg) scale(0.5); position:absolute;}
  #langToggle:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--signal); outline-offset:2px;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:0 5%;
    overflow:hidden;
  }
  #bg-canvas{
    position:absolute; inset:0; width:100%; height:100%; z-index:0;
  }
  .castle-row{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    width:100%; height:18vh; min-height:120px; max-height:210px;
    display:block; pointer-events:none; opacity:1;
    overflow:hidden;
  }
  .castle-row::before{
    content:''; position:absolute; left:0; right:0; bottom:0; height:100%;
    background:linear-gradient(to top, rgba(67,244,124,0.16), transparent 66%);
    mix-blend-mode:screen; pointer-events:none;
  }
  html[data-theme="light"] .castle-row::before{
    background:linear-gradient(to top, rgba(14,143,74,0.13), transparent 66%);
    mix-blend-mode:multiply;
  }
  .castle-row svg{
    position:absolute; left:0; right:0; bottom:0;
    width:100%; height:100%; image-rendering:pixelated;
    filter:drop-shadow(0 -3px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 18px rgba(67,244,124,0.16));
  }
  html[data-theme="light"] .castle-row svg{
    filter:drop-shadow(0 -3px 0 rgba(22,26,31,0.16)) drop-shadow(0 0 14px rgba(14,143,74,0.12));
  }
  .hero-content{position:relative; z-index:2; max-width:780px;}
  .eyebrow{
    font-family:'JetBrains Mono', monospace; color:var(--signal); font-size:13px;
    letter-spacing:2px; text-transform:uppercase; display:flex; align-items:center; gap:10px;
    margin-bottom:22px; font-weight:700;
  }
  .eyebrow::before{content:''; width:8px; height:8px; border-radius:0; background:var(--signal); box-shadow:0 0 0 2px var(--ink), 0 0 10px var(--signal); animation:pulse 1.2s steps(2) infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
  .hero h1{
    font-family:'Space Grotesk', sans-serif; font-weight:600;
    font-size:clamp(28px, 4.6vw, 54px); line-height:1.5; letter-spacing:-0.2px;
    margin-bottom:24px;
  }
  .hero h1 .accent{color:var(--signal);}
  html[data-theme="light"] .hero h1 .accent{box-shadow:4px 4px 0 0 rgba(22,26,31,0.18);}
  .hero h1 .accent::before, .hero h1 .accent::after{
    content:''; position:absolute; width:7px; height:7px; background:var(--signal); top:-3px;
  }
  .hero h1 .accent::before{left:-3px;} .hero h1 .accent::after{right:-3px;}
  .hero p{
    font-size:18px; color:var(--mute); max-width:560px; line-height:1.7; margin-bottom:40px;
  }
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
  .btn{
    font-family:'JetBrains Mono', monospace; font-size:14px; letter-spacing:0.5px; font-weight:700;
    padding:15px 28px; border-radius:0; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px; transition:transform 0.15s, box-shadow 0.15s;
    border:2px solid transparent;
  }
  .btn-primary{background:var(--signal); color:#04200E; font-weight:700; border-color:var(--paper); box-shadow: var(--pixel-shadow);}
  .btn-primary:hover{transform:translate(-2px,-2px); box-shadow: var(--pixel-shadow-hover);}
  .btn-ghost{border:2px solid var(--paper); color:var(--paper); box-shadow: var(--pixel-shadow);}
  .btn-ghost:hover{border-color:var(--signal); color:var(--signal); transform:translate(-2px,-2px); box-shadow: var(--pixel-shadow-hover);}


  /* ---------- SECTION WRAP ---------- */
  section{padding:120px 5%;}
  .section-head{margin-bottom:60px; max-width:680px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{
    font-family:'Space Grotesk', sans-serif; font-weight:600;
    font-size:clamp(28px, 3.4vw, 42px); letter-spacing:-0.3px; margin-bottom:14px;
  }
  .section-head p{color:var(--mute); font-size:16px; line-height:1.6;}

  .reveal{opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* ---------- SERVICES ---------- */
  .services{background:var(--ink-2); border-top:2px dashed var(--line); border-bottom:2px dashed var(--line); position:relative;}
  .service-list{display:flex; flex-direction:column; border-top:2px dashed var(--line);}
  .service-row{
    display:grid; grid-template-columns:140px 1fr 1fr 40px; gap:28px; align-items:center;
    padding:32px 0; border-bottom:2px dashed var(--line);
    transition:background 0.3s;
  }
  .service-row:hover{background:rgba(79,227,193,0.04);}
  .service-method{
    font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
    color:var(--signal); letter-spacing:1px; background:var(--ink-3); display:inline-block;
    padding:4px 8px; border:1px solid var(--line);
  }
  .service-row h3{font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:600;}
  .service-row p{color:var(--mute); font-size:14.5px; line-height:1.6;}
  .service-arrow{color:var(--mute); font-size:20px; transition:transform 0.3s, color 0.3s;}
  .service-row:hover .service-arrow{transform:translateX(6px); color:var(--signal);}
  @media (max-width:760px){
    .service-row{grid-template-columns:1fr; gap:10px; padding:26px 0;}
    .service-arrow{display:none;}
  }

  /* ---------- PORTFOLIO ---------- */
  .portfolio-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  }
  @media (max-width:760px){.portfolio-grid{grid-template-columns:1fr;}}
  .pcard{
    background:var(--ink-2); border:2px solid var(--line); border-radius:0;
    padding:32px; position:relative; overflow:hidden;
    transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: var(--pixel-shadow);
  }
  .pcard:hover{transform:translate(-3px,-3px); border-color:var(--signal); box-shadow: var(--pixel-shadow-hover);}
  .pcard::before{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:repeating-linear-gradient(90deg, var(--signal) 0 8px, transparent 8px 16px);
    transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
  }
  .pcard:hover::before{transform:scaleX(1);}
  .pcard-path{
    font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--mute);
    margin-bottom:18px; letter-spacing:0.5px;
  }
  .pcard-path span{color:var(--signal);}
  .pcard h3{
    font-family:'Space Grotesk', sans-serif; font-size:25px; font-weight:700; letter-spacing:-0.2px;
    margin-bottom:14px; display:flex; align-items:center; color:var(--paper);
  }
  .pcard p{color:var(--mute); font-size:15px; line-height:1.75; margin-bottom:20px;}
  .pcard a.visit{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--paper);
    text-decoration:none; border-bottom:1px solid var(--signal); padding-bottom:2px;
  }
  .pcard a.visit:hover{color:var(--signal);}
  .tag{
    display:inline-block; font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
    color:var(--ember); border:2px solid var(--ember); border-radius:0;
    padding:3px 9px; margin-bottom:16px;
  }

  /* ---------- CONTACT ---------- */
  .contact{background:var(--ink-2); border-top:2px dashed var(--line); position:relative;}
  .contact-wrap{
    display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start;
  }
  @media (max-width:860px){.contact-wrap{grid-template-columns:1fr;}}
  .contact-left h2{font-family:'Space Grotesk', sans-serif; font-size:clamp(28px,3.4vw,40px); margin-bottom:18px; font-weight:600;}
  .contact-left p{color:var(--mute); line-height:1.7; margin-bottom:28px;}
  .contact-detail{display:flex; flex-direction:column; gap:14px; font-family:'JetBrains Mono', monospace; font-size:13px;}
  .contact-detail .label{color:var(--mute);}
  .contact-detail .val{color:var(--signal);}

  .terminal{
    background:var(--ink); border:2px solid var(--paper); border-radius:0;
    overflow:hidden; box-shadow: 6px 6px 0 0 var(--signal);
  }
  .terminal-bar{
    display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line);
    background:var(--ink-3);
  }
  .dot-red{background:#FF5F57; border-radius:0;} .dot-yellow{background:#FEBC2E; border-radius:0;} .dot-green{background:#28C840; border-radius:0;}
  .terminal-bar .dot{width:10px; height:10px; border-radius:0;}
  .terminal-bar .ttitle{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--mute); margin-left:8px;}
  form{padding:30px;}
  .field{margin-bottom:22px;}
  .field label{
    display:block; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--mute);
    margin-bottom:8px; letter-spacing:0.5px;
  }
  .field label::before{content:'$ '; color:var(--signal);}
  .field input, .field select, .field textarea{
    width:100%; background:var(--ink-3); border:2px solid var(--line); border-radius:0;
    padding:13px 14px; color:var(--paper); font-family:'Inter', sans-serif; font-size:14.5px;
    transition:border-color 0.2s;
  }
  .field textarea{resize:vertical; min-height:100px;}
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--signal); outline:none;
  }
  .err-msg{display:none; color:var(--ember); font-size:12px; margin-top:6px; font-family:'JetBrains Mono', monospace;}
  .field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--ember);}
  .field.invalid .err-msg{display:block;}
  .submit-row{display:flex; align-items:center; gap:16px;}
  .form-status{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--signal); display:none;}
  .form-status.show{display:inline;}

  footer{
    padding:36px 5%; text-align:center; color:var(--mute); font-size:13px;
    font-family:'JetBrains Mono', monospace; border-top:2px dashed var(--line);
  }