:root{
    --bg-deep:#05070b;
    --bg-surface:#0b0f16;
    --bg-card:#10151e;
    --bg-card-hover:#141b26;
    --border:rgba(148,163,184,0.12);
    --border-strong:rgba(148,163,184,0.22);
    --blue:#3b82f6;
    --blue-soft:rgba(59,130,246,0.15);
    --cyan:#22d3ee;
    --text:#e7edf5;
    --text-muted:#8b96a8;
    --text-dim:#5b6577;
    --radius:14px;
    --display:'Space Grotesk',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'JetBrains Mono',monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg-deep);
    color:var(--text);
    font-family:var(--body);
    line-height:1.6;
    overflow-x:hidden;
  }

  /* subtle grid texture across whole page */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
      linear-gradient(rgba(148,163,184,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,163,184,0.035) 1px, transparent 1px);
    background-size:64px 64px;
    pointer-events:none;
    z-index:0;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  }

  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}

  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:1;}

  /* ---------- NAVBAR ---------- */
  .nav-shell{
    position:fixed;
    top:22px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    z-index:100;
    pointer-events:none;
  }

  nav{
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(11,15,22,0.65);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid var(--border);
    border-radius:100px;
    padding:8px 10px 8px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);
    transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  }

  nav.hide{ transform:translateY(-140%); }

  .nav-brand{
    font-family:var(--mono);
    font-size:13px;
    color:var(--text-muted);
    margin-right:18px;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .nav-brand span{color:var(--blue);}

  .nav-links{display:flex;align-items:center;gap:2px;}

  .nav-links a{
    position:relative;
    font-size:14px;
    font-weight:500;
    color:var(--text-muted);
    padding:9px 16px;
    border-radius:100px;
    transition:color .25s ease;
    z-index:1;
  }

  .nav-links a::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:100px;
    background:var(--blue-soft);
    opacity:0;
    transform:scale(.85);
    transition:opacity .25s ease, transform .25s ease;
    z-index:-1;
  }

  .nav-links a:hover{color:var(--text);}
  .nav-links a:hover::before{opacity:1;transform:scale(1);}

  .nav-cta{
    margin-left:8px;
    font-size:13px;
    font-weight:600;
    color:var(--bg-deep);
    background:var(--blue);
    padding:9px 18px;
    border-radius:100px;
    transition:background .25s ease, transform .25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--cyan);transform:translateY(-1px);}

  @media (max-width:720px){
    .nav-brand{display:none;}
    .nav-links a{padding:8px 11px;font-size:13px;}
    nav{padding:6px 6px 6px 14px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:120px;
    padding-bottom:80px;
    position:relative;
  }

  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:60px;
    align-items:center;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:14px;
    color:var(--blue);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }

  .eyebrow .cursor{
    display:inline-block;
    width:8px;
    height:16px;
    background:var(--blue);
    animation:blink 1.1s step-end infinite;
  }

  @keyframes blink{ 50%{opacity:0;} }

  .hero h1{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(38px, 5.4vw, 64px);
    line-height:1.05;
    letter-spacing:-0.02em;
    color:#fff;
    margin-bottom:16px;
  }

  .hero .role{
    font-family:var(--display);
    font-size:clamp(19px, 2.2vw, 24px);
    font-weight:600;
    color:var(--blue);
    margin-bottom:22px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .hero .role::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--blue);
    display:inline-block;
  }

  .hero p.desc{
    max-width:480px;
    color:var(--text-muted);
    font-size:16.5px;
    margin-bottom:38px;
  }

  .btn-row{display:flex;gap:14px;flex-wrap:wrap;}

  .btn{
    font-size:14.5px;
    font-weight:600;
    padding:14px 26px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .btn-primary{
    background:var(--blue);
    color:#fff;
    box-shadow:0 8px 24px -8px rgba(59,130,246,0.55);
  }
  .btn-primary:hover{
    background:var(--cyan);
    transform:translateY(-2px);
    box-shadow:0 12px 28px -8px rgba(34,211,238,0.5);
  }

  .btn-ghost{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border-strong);
  }
  .btn-ghost:hover{
    border-color:var(--blue);
    color:var(--blue);
    transform:translateY(-2px);
  }

  /* ---- photo frame (signature element) ---- */
  .photo-frame{
    position:relative;
    width:100%;
    max-width:380px;
    margin-left:auto;
    aspect-ratio:4/5;
  }

  .frame-tag{
    position:absolute;
    top:-14px;
    left:26px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--bg-deep);
    background:var(--blue);
    padding:4px 10px;
    border-radius:5px;
    z-index:3;
    font-weight:600;
  }

  .frame-corner{
    position:absolute;
    width:34px;
    height:34px;
    border:2px solid var(--blue);
    z-index:3;
    opacity:.9;
  }
  .frame-corner.tl{top:-10px;left:-10px;border-right:none;border-bottom:none;border-top-left-radius:8px;}
  .frame-corner.br{bottom:-10px;right:-10px;border-left:none;border-top:none;border-bottom-right-radius:8px;}

  .photo-inner{
    position:relative;
    width:100%;
    height:100%;
    border-radius:16px;
    overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(59,130,246,0.35), transparent 55%),
      linear-gradient(160deg,#141b26,#0a0d13 70%);
    border:1px solid var(--border-strong);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .photo-inner img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
  }

  /* placeholder monogram shown until a real photo is dropped in */
  .photo-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:var(--text-dim);
  }
  .photo-placeholder .mono{
    font-family:var(--display);
    font-weight:700;
    font-size:64px;
    color:var(--border-strong);
    letter-spacing:-0.03em;
  }
  .photo-placeholder small{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.02em;
  }

  .photo-glow{
    position:absolute;
    inset:20px;
    background:radial-gradient(circle, rgba(59,130,246,0.35), transparent 70%);
    filter:blur(40px);
    z-index:0;
  }

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;text-align:left;}
    .photo-frame{margin:0 auto;max-width:300px;order:-1;}
  }

  /* ---------- SECTION SHARED ---------- */
  section{position:relative;padding:110px 0;}

  .section-head{text-align:center;margin-bottom:64px;}
  .section-head .eyebrow{justify-content:center;}
  .section-head h2{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(30px,4vw,42px);
    color:#fff;
    letter-spacing:-0.01em;
  }

  /* ---------- SOBRE MIM ---------- */
  #sobre{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

  .about-grid{
    display:grid;
    grid-template-columns:88px 1fr 300px;
    gap:44px;
    align-items:start;
  }

  /* icon rail */
  .icon-rail{
    display:flex;
    flex-direction:column;
    gap:26px;
    position:sticky;
    top:120px;
  }

  .icon-btn{
    position:relative;
    width:56px;
    height:56px;
    border-radius:14px;
    background:var(--bg-card);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    transition:transform .3s cubic-bezier(.2,.9,.3,1.3), color .3s ease, border-color .3s ease, box-shadow .3s ease;
    transform-origin:center;
  }
  .icon-btn svg{width:22px;height:22px;position:relative;z-index:1;}

  .icon-btn:hover{
    transform:scale(1.28);
    color:#fff;
    border-color:var(--blue);
    box-shadow:0 10px 26px -8px rgba(59,130,246,0.55);
    z-index:5;
  }

  .icon-btn[data-brand="linkedin"]:hover{background:linear-gradient(145deg,#0a66c2,#0b1420);}
  .icon-btn[data-brand="github"]:hover{background:linear-gradient(145deg,#2b2f36,#0b1420);}
  .icon-btn[data-brand="instagram"]:hover{background:linear-gradient(145deg,#c13584,#0b1420);}
  .icon-btn[data-brand="facebook"]:hover{background:linear-gradient(145deg,#1877f2,#0b1420);}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr;}
    .icon-rail{flex-direction:row;position:static;justify-content:center;}
  }

  /* middle content cards */
  .about-cards{display:flex;flex-direction:column;gap:18px;}

  .card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px 28px;
    transition:border-color .3s ease, transform .3s ease, background .3s ease;
  }
  .card:hover{border-color:var(--border-strong);background:var(--bg-card-hover);transform:translateY(-2px);}

  .card .label{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:8px;
  }

  .card.identity h3{
    font-family:var(--display);
    font-size:26px;
    font-weight:700;
    color:#fff;
    margin-bottom:4px;
  }
  .card.identity p{color:var(--text-muted);font-size:14.5px;}

  .card p.body-text{color:var(--text-muted);font-size:15px;}

  .card.contact-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .contact-card .handle{
    font-family:var(--mono);
    color:var(--text);
    font-size:15px;
  }
  .contact-card .handle span{color:var(--text-dim);}

  .copy-btn{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--blue);
    border:1px solid var(--border-strong);
    padding:8px 14px;
    border-radius:8px;
    background:transparent;
    transition:background .25s ease, color .25s ease;
  }
  .copy-btn:hover{background:var(--blue-soft);}

  /* right: live profile preview mock */
  .preview-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .preview-bar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:12px 14px;
    background:#0c1017;
    border-bottom:1px solid var(--border);
  }
  .preview-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);}
  .preview-bar .url{
    font-family:var(--mono);
    font-size:11px;
    color:var(--text-dim);
    margin-left:8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .preview-body{
    padding:28px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    background:
      radial-gradient(circle at 50% 0%, rgba(59,130,246,0.14), transparent 60%);
  }
  .preview-avatar{
    width:74px;height:74px;border-radius:50%;
    background:linear-gradient(145deg,#1b2331,#0a0d13);
    border:1px solid var(--border-strong);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:700;font-size:22px;color:var(--blue);
  }
  .preview-body strong{font-family:var(--display);font-size:16px;color:#fff;}
  .preview-body span{font-size:12.5px;color:var(--text-muted);}
  .preview-tag{
    margin-top:6px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--blue);
    background:var(--blue-soft);
    padding:5px 11px;
    border-radius:100px;
  }

  @media (max-width:1100px){
    .about-grid{grid-template-columns:80px 1fr;}
    .preview-card{grid-column:1/-1;max-width:340px;margin:0 auto;}
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:40px 0;
    text-align:center;
    color:var(--text-dim);
    font-size:13px;
    font-family:var(--mono);
  }
  footer a{color:var(--blue);}