:root {
      --bg:        #04070d;
      --bg2:       #060a12;
      --surface:   #08101a;
      --surface2:  #0c1520;
      --border:    #142030;
      --border2:   #1c2e44;
      --cyan:      #00d4ff;
      --cyan-dim:  rgba(0,212,255,0.07);
      --green:     #00e896;
      --green-dim: rgba(0,232,150,0.07);
      --orange:    #ff7043;
      --purple:    #a78bfa;
      --text:      #c2d4e4;
      --text2:     #6e8aa0;
      --muted:     #2a4055;
      --white:     #e8f4ff;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; overflow-x:hidden; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      overflow-x: hidden;
    }
    body::before {
      content:'';
      position:fixed; inset:0;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.007) 2px, rgba(0,212,255,0.007) 3px);
      pointer-events:none; z-index:998;
    }
    #bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

    /* NAV */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:500;
      height:58px; display:flex; align-items:center; justify-content:space-between;
      padding:0 3.5rem;
      background:rgba(4,7,13,0.82); backdrop-filter:blur(20px);
      border-bottom:1px solid var(--border);
    }
    .nav-brand { display:flex; align-items:center; gap:0.6rem; font-size:0.74rem; letter-spacing:0.16em; color:var(--cyan); text-decoration:none; }
    .nav-pulse { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse-anim 2.5s ease infinite; }
    nav ul { display:flex; list-style:none; }
    nav a.nl {
      display:flex; align-items:center; height:58px; padding:0 1rem;
      font-size:0.63rem; letter-spacing:0.1em; color:var(--muted);
      text-decoration:none; border-left:1px solid var(--border);
      transition:color 0.2s, background 0.2s;
    }
    nav li:last-child a.nl { border-right:1px solid var(--border); }
    nav a.nl:hover, nav a.nl.active { color:var(--cyan); background:var(--cyan-dim); }
    nav a.nl-store {
      color:var(--bg); background:var(--cyan); border-left:1px solid var(--cyan); border-right:1px solid var(--cyan);
      font-weight:600; letter-spacing:0.15em; gap:0.35em;
    }
    nav a.nl-store::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 1.5px var(--bg); }
    nav a.nl-store:hover { color:var(--bg); background:var(--green); border-color:var(--green); }

    /* HERO */
    #hero {
      position:relative; z-index:2; min-height:100vh;
      display:grid; grid-template-columns:1fr 360px;
      align-items:center; gap:4rem;
      padding:0 3.5rem; max-width:1200px; margin:0 auto;
    }
    .hero-eyebrow {
      display:flex; align-items:center; gap:1rem;
      font-size:0.62rem; letter-spacing:0.35em; color:var(--cyan); margin-bottom:1.8rem;
      opacity:0; animation:fade-up 0.6s 0.2s forwards;
    }
    .hero-eyebrow::before { content:''; width:26px; height:1px; background:currentColor; }
    .hero-name {
      font-family:'Barlow Condensed', sans-serif;
      font-size:clamp(3.8rem,9vw,8rem); font-weight:800; line-height:0.88;
      color:var(--white); letter-spacing:-0.01em;
      opacity:0; animation:fade-up 0.7s 0.4s forwards;
    }
    .hero-name .ghost { display:block; color:transparent; -webkit-text-stroke:1px rgba(0,212,255,0.4); }
    .hero-role { font-size:0.75rem; letter-spacing:0.25em; color:var(--green); margin-top:1.5rem; opacity:0; animation:fade-up 0.7s 0.6s forwards; }
    .hero-desc {
      font-family:'Lora', serif; font-size:clamp(0.95rem,1.3vw,1.1rem);
      color:var(--text2); line-height:1.8; margin-top:1.4rem; max-width:420px; font-style:italic;
      opacity:0; animation:fade-up 0.7s 0.8s forwards;
    }
    .hero-cta { display:flex; gap:0.7rem; margin-top:2.5rem; opacity:0; animation:fade-up 0.7s 1s forwards; }

    /* BUTTONS */
    .btn {
      font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.12em;
      padding:0.8rem 1.8rem; border:1px solid var(--border2);
      background:transparent; color:var(--text2); text-decoration:none;
      transition:all 0.22s; position:relative; overflow:hidden;
    }
    .btn span { position:relative; z-index:1; }
    .btn::before { content:''; position:absolute; inset:0; background:var(--cyan-dim); transform:translateX(-101%); transition:transform 0.25s ease; }
    .btn:hover { border-color:var(--cyan); color:var(--cyan); }
    .btn:hover::before { transform:translateX(0); }
    .btn-fill { background:var(--cyan); color:var(--bg); border-color:var(--cyan); font-weight:600; }
    .btn-fill::before { background:var(--green); }
    .btn-fill:hover { border-color:var(--green); color:var(--bg); }

    /* HERO PANEL */
    .hero-panel { opacity:0; animation:fade-up 0.8s 0.5s forwards; border:1px solid var(--border); overflow:hidden; }
    .hp-bar { padding:0.65rem 1rem; border-bottom:1px solid var(--border); background:var(--surface2); display:flex; align-items:center; justify-content:space-between; }
    .hp-dots { display:flex; gap:0.35rem; }
    .hp-d { width:9px; height:9px; border-radius:50%; }
    .hp-d.r{background:#ff5f57;} .hp-d.y{background:#febc2e;} .hp-d.g{background:#28c840;}
    .hp-title { font-size:0.6rem; color:var(--muted); letter-spacing:0.08em; }
    .hp-code { padding:1.2rem 1.3rem; font-size:0.74rem; line-height:2.1; }
    .c-c{color:var(--muted);} .c-k{color:var(--green);} .c-s{color:#ffb86c;} .c-n{color:var(--purple);} .c-b{color:var(--cyan);}
    .hp-metrics { border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; }
    .hpm { padding:0.9rem 1.1rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
    .hpm:nth-child(even){border-right:none;} .hpm:nth-last-child(-n+2){border-bottom:none;}
    .hpm-label { font-size:0.56rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:0.2rem; }
    .hpm-val { font-family:'Barlow Condensed', sans-serif; font-size:1.65rem; font-weight:700; color:var(--white); }
    .hpm-val em { font-style:normal; color:var(--cyan); }

    /* HERO STATUS */
    .hero-status { position:absolute; bottom:2.5rem; left:3.5rem; display:flex; gap:2.5rem; opacity:0; animation:fade-up 0.7s 1.2s forwards; }
    .hs { display:flex; align-items:center; gap:0.45rem; font-size:0.6rem; color:var(--muted); letter-spacing:0.1em; }
    .hs-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse-anim 2.5s ease infinite; }

    /* SECTIONS */
    .wrap { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:6.5rem 3.5rem; }
    .eyebrow { display:flex; align-items:center; gap:0.9rem; font-size:0.6rem; letter-spacing:0.35em; color:var(--cyan); margin-bottom:0.7rem; }
    .eyebrow::before { content:''; width:18px; height:1px; background:currentColor; }
    .s-title { font-family:'Barlow Condensed', sans-serif; font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; letter-spacing:-0.01em; color:var(--white); line-height:1; margin-bottom:3.5rem; }
    .divhr { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 3.5rem; }
    .divhr hr { border:none; border-top:1px solid var(--border); }

    /* STATS */
    .stats-row { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); }
    .stat { padding:2rem; border-right:1px solid var(--border); }
    .stat:last-child{border-right:none;}
    .stat-n { font-family:'Barlow Condensed', sans-serif; font-size:3rem; font-weight:800; line-height:1; color:var(--white); }
    .stat-n em { font-style:normal; color:var(--cyan); }
    .stat-l { font-size:0.7rem; color:var(--text2); margin-top:0.3rem; }

    /* ABOUT */
    .about-layout { display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start; }
    .about-bio p { font-family:'Lora', serif; font-size:1.05rem; color:var(--text2); line-height:1.85; margin-bottom:1.3rem; }
    .about-bio p:first-child { font-size:1.15rem; color:var(--text); }
    .about-bio strong { color:var(--white); font-style:normal; font-family:'JetBrains Mono', monospace; font-size:0.9em; }

    /* TIMELINE */
    .timeline { margin-top:2.5rem; }
    .tl-label { font-size:0.6rem; letter-spacing:0.3em; color:var(--cyan); margin-bottom:1.2rem; display:flex; align-items:center; gap:0.7rem; }
    .tl-label::after { content:''; flex:1; height:1px; background:var(--border); }
    .tl-item { display:grid; grid-template-columns:130px 1fr; gap:1.2rem; padding:1.2rem 0; border-bottom:1px solid var(--border); position:relative; }
    .tl-item:last-child{border-bottom:none;}
    .tl-item::before { content:''; position:absolute; left:128px; top:0; bottom:0; width:1px; background:var(--border); }
    .tl-period { font-size:0.62rem; color:var(--muted); padding-right:1rem; line-height:1.6; padding-top:0.1rem; }
    .tl-role { font-size:0.82rem; color:var(--white); font-weight:600; margin-bottom:0.2rem; }
    .tl-company { font-size:0.7rem; color:var(--cyan); margin-bottom:0.5rem; letter-spacing:0.05em; }
    .tl-desc { font-size:0.72rem; color:var(--text2); line-height:1.65; }
    .tl-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.6rem; }
    .tl-tag { font-size:0.58rem; padding:0.15rem 0.5rem; border:1px solid var(--border2); color:var(--muted); }

    /* ABOUT SIDE */
    .about-side { position:sticky; top:80px; }
    .profile-card { border:1px solid var(--border); overflow:hidden; margin-bottom:1px; }
    .pc-visual { background:linear-gradient(145deg, #060d18, #091520, #050b14); padding:2.5rem 2rem; position:relative; overflow:hidden; }
    .pc-visual::before { content:'GC'; position:absolute; right:-0.5rem; bottom:-1.5rem; font-family:'Barlow Condensed', sans-serif; font-size:10rem; font-weight:800; line-height:1; color:rgba(0,212,255,0.04); pointer-events:none; }
    .pc-name { font-family:'Barlow Condensed', sans-serif; font-size:2.2rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:0.4rem; }
    .pc-title { font-size:0.65rem; letter-spacing:0.2em; color:var(--cyan); margin-bottom:1.5rem; }
    .pc-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
    .pc-tag { font-size:0.58rem; padding:0.2rem 0.55rem; border:1px solid var(--border2); color:var(--text2); }
    .about-facts { border:1px solid var(--border); }
    .af-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border); transition:background 0.2s; }
    .af-row:last-child{border-bottom:none;}
    .af-row:hover{background:var(--surface);}
    .af-icon { font-size:1rem; width:24px; text-align:center; }
    .af-label { font-size:0.58rem; color:var(--muted); letter-spacing:0.15em; margin-bottom:0.15rem; }
    .af-val { font-size:0.78rem; color:var(--white); }

    /* COMPANIES GRID */
    .companies-grid { display:flex; flex-direction:column; gap:1px; border:1px solid var(--border); }
    .co-chip {
      display:flex; align-items:center; gap:1rem;
      padding:1.1rem 1.4rem; background:var(--surface);
      border-bottom:1px solid var(--border);
      transition:background 0.2s;
    }
    .co-chip:last-child{border-bottom:none;}
    .co-chip:hover{background:var(--surface2);}
    .co-dot {
      width:7px; height:7px; border-radius:50%; flex-shrink:0;
      background:var(--muted);
    }
    .co-current .co-dot { background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse-anim 2.5s ease infinite; }
    .co-dot-past { background:var(--muted) !important; box-shadow:none !important; animation:none !important; }
    .co-name { font-size:0.82rem; color:var(--white); margin-bottom:0.15rem; }
    .co-role { font-size:0.65rem; color:var(--text2); letter-spacing:0.05em; }

    /* CERTS */
    .certs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
    .cert-card { background:var(--surface); padding:1.5rem 1.6rem; transition:background 0.2s; }
    .cert-card:hover{background:var(--surface2);}
    .cert-year { font-size:0.6rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:0.5rem; }
    .cert-name { font-size:0.8rem; color:var(--white); line-height:1.4; margin-bottom:0.3rem; }
    .cert-issuer { font-size:0.68rem; color:var(--text2); }

    /* STACK */
    .stack-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
    .sc { background:var(--surface); padding:2rem 1.8rem; position:relative; overflow:hidden; transition:background 0.2s; cursor:default; }
    .sc:hover{background:var(--surface2);}
    .sc-bar { position:absolute; top:0; left:0; right:0; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
    .sc:hover .sc-bar{transform:scaleX(1);}
    .sc-icon { font-size:1.8rem; margin-bottom:1.1rem; display:block; }
    .sc-name { font-size:0.74rem; color:var(--white); letter-spacing:0.08em; margin-bottom:0.35rem; }
    .sc-desc { font-size:0.72rem; color:var(--text2); line-height:1.6; }

    /* SERVICES */
    .srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
    .srv { background:var(--surface); padding:2.2rem 2rem; position:relative; overflow:hidden; transition:background 0.2s; }
    .srv:hover{background:var(--surface2);}
    .srv-num { font-size:0.58rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:1.1rem; }
    .srv-icon { font-size:1.9rem; margin-bottom:0.9rem; display:block; }
    .srv-name { font-family:'Barlow Condensed', sans-serif; font-size:1.3rem; font-weight:700; color:var(--white); margin-bottom:0.5rem; }
    .srv-desc { font-size:0.76rem; color:var(--text2); line-height:1.65; }
    .srv-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:1.1rem; }
    .srv-tag { font-size:0.58rem; padding:0.18rem 0.5rem; border:1px solid var(--border2); color:var(--muted); transition:all 0.2s; }
    .srv:hover .srv-tag{border-color:var(--cyan);color:var(--cyan);}
    .srv-tag.g{color:var(--green);border-color:rgba(0,232,150,0.25);}
    .srv:hover .srv-tag.g{border-color:var(--green);}
    .srv-tag.o{color:var(--orange);border-color:rgba(255,112,67,0.25);}
    .srv:hover .srv-tag.o{border-color:var(--orange);}
    .srv-accent { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); opacity:0; transition:opacity 0.3s; }
    .srv:hover .srv-accent{opacity:1;}

    /* PORTFOLIO */
    .proj-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
    .proj { background:var(--surface); padding:2.4rem 2.2rem; position:relative; overflow:hidden; transition:background 0.22s; }
    .proj:hover{background:var(--surface2);}
    .proj.feat { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
    .proj-status-badge { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.6rem; color:var(--green); letter-spacing:0.1em; margin-bottom:1rem; }
    .proj-status-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); animation:pulse-anim 2s ease infinite; }
    .proj-badge { display:inline-block; font-size:0.58rem; letter-spacing:0.18em; padding:0.18rem 0.55rem; border:1px solid var(--cyan); color:var(--cyan); margin-bottom:1.3rem; }
    .proj-num { font-size:0.58rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:0.7rem; }
    .proj-name { font-family:'Barlow Condensed', sans-serif; font-size:1.55rem; font-weight:700; color:var(--white); line-height:1.05; margin-bottom:0.7rem; }
    .proj.feat .proj-name{font-size:2rem;}
    .proj-desc { font-size:0.78rem; color:var(--text2); line-height:1.7; }
    .proj-meta { margin-top:1.4rem; display:flex; flex-direction:column; gap:0.5rem; }
    .pm-row { display:flex; gap:0.8rem; font-size:0.68rem; }
    .pm-k { color:var(--muted); width:70px; flex-shrink:0; }
    .pm-v { color:var(--text2); }
    .proj-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:1.1rem; }
    .ptag { font-size:0.58rem; padding:0.18rem 0.5rem; border:1px solid var(--border2); color:var(--muted); }
    .proj-terminal { background:#020508; border:1px solid var(--border); padding:1.2rem 1.3rem; font-size:0.72rem; line-height:2; }
    .pt-bar { display:flex; gap:0.35rem; margin-bottom:0.8rem; }
    .pt-d { width:8px; height:8px; border-radius:50%; }
    .pt-d.r{background:#ff5f57;} .pt-d.y{background:#febc2e;} .pt-d.g{background:#28c840;}
    .proj-side-bar { position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cyan); transform:scaleY(0); transform-origin:top; transition:transform 0.3s ease; }
    .proj:hover .proj-side-bar{transform:scaleY(1);}

    /* PROCESS */
    .proc-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); }
    .ps { padding:2.2rem 1.8rem; border-right:1px solid var(--border); }
    .ps:last-child{border-right:none;}
    .ps-num { font-family:'Barlow Condensed', sans-serif; font-size:3.5rem; font-weight:800; color:var(--border2); line-height:1; margin-bottom:1rem; }
    .ps-title { font-size:0.82rem; color:var(--white); margin-bottom:0.5rem; font-weight:600; }
    .ps-desc { font-size:0.74rem; color:var(--text2); line-height:1.65; }

    /* TERMINAL */
    .terminal { background:#030508; border:1px solid var(--border); font-size:0.77rem; overflow:hidden; }
    .t-bar { padding:0.7rem 1.1rem; border-bottom:1px solid var(--border); background:var(--surface2); display:flex; align-items:center; justify-content:space-between; }
    .t-dots { display:flex; gap:0.35rem; }
    .t-d { width:9px; height:9px; border-radius:50%; }
    .t-d.r{background:#ff5f57;} .t-d.y{background:#febc2e;} .t-d.g{background:#28c840;}
    .t-title { font-size:0.6rem; color:var(--muted); letter-spacing:0.1em; }
    .t-body { padding:1.3rem 1.5rem; line-height:2.15; }
    .tp{color:var(--green);} .tpa{color:var(--cyan);} .tc{color:var(--white);} .to{color:var(--text2);}
    .tok{color:var(--green);} .tv{color:var(--cyan);} .tcm{color:var(--muted);} .tw{color:var(--orange);}
    .cursor { display:inline-block; width:7px; height:0.9em; background:var(--cyan); vertical-align:text-bottom; animation:blink 1.1s step-end infinite; }

    /* CONTACT */
    .contact-layout { display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; }
    .contact-intro { font-family:'Lora', serif; font-size:1.1rem; color:var(--text2); line-height:1.8; font-style:italic; margin-bottom:2.2rem; }
    .ccontact { border:1px solid var(--border); }
    .cc { display:flex; align-items:center; gap:1.2rem; padding:1.4rem 1.6rem; border-bottom:1px solid var(--border); text-decoration:none; background:var(--surface); transition:all 0.22s; position:relative; overflow:hidden; }
    .cc:last-child{border-bottom:none;}
    .cc-line { position:absolute; left:0; top:0; bottom:0; width:2px; transform:scaleY(0); transform-origin:top; transition:transform 0.25s; }
    .cc.wa .cc-line{background:#25d366;} .cc.em .cc-line{background:var(--cyan);}
    .cc:hover .cc-line{transform:scaleY(1);}
    .cc:hover{background:var(--surface2);padding-left:2rem;}
    .cc-icon { width:40px; height:40px; flex-shrink:0; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; }
    .cc.wa .cc-icon{color:#25d366;} .cc.em .cc-icon{color:var(--cyan);}
    .cc-label { font-size:0.58rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:0.2rem; }
    .cc-val { font-size:0.88rem; color:var(--white); }
    .cc-hint { font-size:0.65rem; color:var(--text2); margin-top:0.15rem; }
    .cc-arrow { margin-left:auto; color:var(--muted); font-size:1rem; transition:transform 0.2s, color 0.2s; }
    .cc:hover .cc-arrow{transform:translate(3px,-3px);color:var(--cyan);}
    .cc.wa:hover .cc-arrow{color:#25d366;}
    .avail-badge { margin-top:1rem; padding:1rem 1.3rem; border:1px solid rgba(0,232,150,0.2); background:rgba(0,232,150,0.04); display:flex; align-items:center; gap:0.7rem; font-size:0.62rem; letter-spacing:0.15em; color:var(--green); }
    .cr-card { border:1px solid var(--border); padding:1.8rem; background:var(--surface); margin-bottom:1px; }
    .cr-label { font-size:0.58rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:0.4rem; }
    .cr-domain { font-family:'Barlow Condensed', sans-serif; font-size:1.7rem; font-weight:700; color:var(--cyan); }
    .cr-ssl { margin-top:0.9rem; display:flex; align-items:center; gap:0.5rem; font-size:0.62rem; color:var(--green); }
    .cr-json { padding:1.4rem 1.5rem; font-size:0.73rem; line-height:2; }

    /* FOOTER */
    footer { position:relative; z-index:2; border-top:1px solid var(--border); padding:1.8rem 3.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.6rem; letter-spacing:0.12em; color:var(--muted); }
    footer .fb { color:var(--cyan); }

    /* FLOAT WA */
    .wa-float { position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right)); z-index:9999; width:56px; height:56px; padding:0; border:none; background:transparent; display:flex; align-items:center; justify-content:center; text-decoration:none; opacity:0.75; --wa-y:0px; --wa-footer-y:0px; will-change:transform,opacity,filter; transform:translateY(calc(var(--wa-y) + var(--wa-footer-y))); transition:transform 0.35s ease-out, opacity 0.2s ease, filter 0.2s ease; animation:float-in 0.5s 2s both; }
    .wa-float svg { display:block; width:100%; height:100%; }
    .wa-float:hover { opacity:1; transform:translateY(calc(var(--wa-y) + var(--wa-footer-y))) scale(1.08); filter:drop-shadow(0 0 8px rgba(37,211,102,0.5)); transition:transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease; }
    .wa-float:active { opacity:1; transform:translateY(calc(var(--wa-y) + var(--wa-footer-y))) scale(0.95); filter:none; }

    /* REVEAL */
    .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.72s ease, transform 0.72s ease; }
    .reveal.in { opacity:1; transform:none; }

    /* ANIMATIONS */
    @keyframes fade-up { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;} }
    @keyframes pulse-anim { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.3;transform:scale(0.85);} }
    @keyframes blink { 0%,100%{opacity:1;}50%{opacity:0;} }
    @keyframes float-in { from{opacity:0;transform:translateY(14px);}to{opacity:0.75;transform:translateY(0);} }

    /* RESPONSIVE */
    @media(max-width:960px){
      nav{padding:0 2rem;}
      #hero{grid-template-columns:1fr;padding:5.5rem 2rem 4rem;}
      .hero-panel{display:none;}
      .wrap{padding:5rem 2rem;}
      .divhr{padding:0 2rem;}
      .about-layout{grid-template-columns:1fr;}
      .about-side{display:none;}
      .stack-grid{grid-template-columns:repeat(2,1fr);}
      .srv-grid{grid-template-columns:1fr 1fr;}
      .proj-grid{grid-template-columns:1fr;}
      .proj.feat{grid-column:auto;display:block;}
      .proj.feat .proj-right{margin-top:1.5rem;}
      .proc-grid{grid-template-columns:1fr 1fr;}
      .stats-row{grid-template-columns:1fr 1fr;}
      .contact-layout{grid-template-columns:1fr;}
      .certs-grid{grid-template-columns:1fr 1fr;}
      footer{padding:1.5rem 2rem;flex-direction:column;gap:0.6rem;text-align:center;}
    }
    @media(max-width:640px){
      nav ul{display:flex;}
      nav ul li{display:none;}
      nav ul li:last-child{display:flex;}
      .hero-name{font-size:clamp(3.2rem,15vw,5rem);}
      .hero-cta{flex-direction:column;gap:0.6rem;}
      .hero-cta .btn{width:100%;text-align:center;justify-content:center;}
      .stack-grid,.srv-grid,.certs-grid{grid-template-columns:1fr;}
      .proc-grid,.stats-row{grid-template-columns:1fr 1fr;}
      .hero-status{left:2rem;gap:1.5rem;}
    }
/* Utility classes extracted from previous inline styles */
.hs-dot-cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.hs-dot-orange { background: var(--orange); box-shadow: 0 0 6px var(--orange); animation-delay: .7s; }
.stats-wrap { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 3.5rem; }
.mt-25 { margin-top: 2.5rem; }
.mt-30 { margin-top: 3rem; }
.mb-12 { margin-bottom: 1.2rem; }
.mb-15 { margin-bottom: 1.5rem; }
.small-link-wrap { font-size: 0.68rem; }
.inline-link { color: var(--cyan); text-decoration: none; transition: opacity 0.2s; }
.inline-link:hover { opacity: 0.7; }
.pt-0 { padding-top: 0; }
.divhr-section { padding: 0; margin-bottom: 4rem; }

@media(max-width:960px){
  .stats-wrap{padding:0 2rem;}
}
.no-shrink { flex-shrink: 0; }
.terminal-small { font-size: 0.72rem; }
.json-string { color: #ffb86c; }

/* WA float — mobile: sobe para não sobrepor botões de conteúdo */
@media(max-width:768px){
  .wa-float { right:calc(16px + env(safe-area-inset-right)); bottom:calc(90px + env(safe-area-inset-bottom)); }
}

/* MOBILE — iPhone Pro (390px – 430px) */
@media(max-width:430px){
  #hero { padding: 5rem 1.25rem 3.5rem; }
  .hero-eyebrow { font-size: 0.52rem; letter-spacing: 0.2em; margin-bottom: 1.2rem; }
  .hero-role { font-size: 0.65rem; letter-spacing: 0.2em; }
  .hero-desc { font-size: 0.9rem; line-height: 1.75; }
  .hero-status { left: 1.25rem; bottom: 1.5rem; gap: 1.2rem; }
  .hs { font-size: 0.55rem; }

  .wrap { padding: 3.5rem 1.25rem; }
  .divhr { padding: 0 1.25rem; }
  .stats-wrap { padding: 0 1.25rem; }

  .s-title { font-size: clamp(1.9rem, 8vw, 2.8rem); margin-bottom: 2rem; }
  .eyebrow { font-size: 0.55rem; }

  .stat { padding: 1.4rem 1rem; }
  .stat-n { font-size: 2.2rem; }
  .stat-l { font-size: 0.65rem; }

  .about-bio p { font-size: 0.95rem; }

  .cert-card { padding: 1.2rem 1.3rem; }
  .cert-name { font-size: 0.75rem; }

  .sc { padding: 1.5rem 1.3rem; }
  .sc-icon { font-size: 1.5rem; margin-bottom: 0.8rem; }

  .srv { padding: 1.8rem 1.4rem; }
  .srv-name { font-size: 1.15rem; }

  .proc-grid { grid-template-columns: 1fr; }
  .ps { border-right: none; border-bottom: 1px solid var(--border); padding: 1.6rem 1.25rem; }
  .ps:last-child { border-bottom: none; }
  .ps-num { font-size: 2.8rem; }

  .proj { padding: 1.8rem 1.4rem; }
  .proj-name { font-size: 1.3rem; }

  .contact-intro { font-size: 0.95rem; }
  .cc { padding: 1.2rem 1.3rem; }
  .cc:hover { padding-left: 1.6rem; }
  .cc-val { font-size: 0.8rem; }

  .terminal { font-size: 0.68rem; }
  .t-body { padding: 1rem 1.1rem; }

  footer { padding: 1.2rem 1.25rem; gap: 0.45rem; font-size: 0.55rem; }

  .divhr-section { margin-bottom: 2.5rem; }
}