:root{
      --bg:#071126;
      --bg-2:#0b1831;
      --panel:#0d1b34;
      --text:#eef5ff;
      --muted:#9db0cb;
      --soft:#7f92ad;
      --blue:#3ec8ff;
      --green:#8fe36b;
      --line:rgba(120,160,210,.16);
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --maxw:1160px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, Arial, Helvetica, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(62,200,255,.10), transparent 24%),
        radial-gradient(circle at bottom right, rgba(143,227,107,.08), transparent 22%),
        linear-gradient(180deg, #071126 0%, #08162b 42%, #091120 100%);
    }
    a{color:inherit}
    img{display:block;max-width:100%}
    .container{width:min(var(--maxw), calc(100% - 32px)); margin:0 auto;}
    .topbar{
      position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
      background:rgba(5,12,25,.66); border-bottom:1px solid rgba(255,255,255,.05);
    }
    .topbar-inner{
      min-height:76px; display:flex; align-items:center; justify-content:space-between;
      gap:16px 24px; flex-wrap:wrap; padding:12px 0;
    }
    .brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0;}
    .brand-logo{
      width:42px; height:42px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.28);
      flex:0 0 auto;
    }
    .brand-copy{display:flex; flex-direction:column; gap:4px; min-width:0;}
    .brand-copy strong{font-size:18px; letter-spacing:.01em; color:#fff;}
    .brand-copy span{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .nav{display:flex; flex-wrap:wrap; gap:8px;}
    .nav a{
      text-decoration:none; color:rgba(255,255,255,.92); padding:10px 14px; border-radius:999px;
      font-size:14px; transition:background .18s ease, transform .18s ease, color .18s ease;
    }
    .nav a:hover{background:rgba(255,255,255,.06); transform:translateY(-1px); color:#fff;}
    .hero{padding:72px 0 34px;}
    .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:start;}
    .eyebrow{
      display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:0 14px; border-radius:999px;
      color:var(--muted); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
      margin-bottom:22px; font-size:13px; letter-spacing:.01em;
    }
    .eyebrow::before{
      content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(180deg,var(--blue),var(--green));
      box-shadow:0 0 18px rgba(62,200,255,.65);
    }
    h1{
      margin:0 0 18px; font-size:clamp(42px, 5vw, 78px); line-height:.96; letter-spacing:-.05em; max-width:760px;
    }
    .lead{max-width:720px; color:var(--muted); font-size:18px; line-height:1.78; margin:0;}
    .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
    .btn{
      min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px;
      border-radius:14px; text-decoration:none; font-weight:800; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{color:#071126; background:linear-gradient(180deg,#ffffff,#dceeff); box-shadow:0 14px 40px rgba(0,0,0,.22);}
    .btn-secondary{color:#fff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);}
    .hero-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px; max-width:760px;}
    .metric{
      padding:18px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
      border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
    }
    .metric strong{display:block; font-size:26px; margin-bottom:6px; color:#fff;}
    .metric span{display:block; color:var(--soft); font-size:14px; line-height:1.55;}
    .hero-card,.panel,.project-card,.contact-box{
      background:linear-gradient(180deg, rgba(13,27,52,.92), rgba(10,22,42,.88)); border:1px solid var(--line); box-shadow:var(--shadow);
    }
    .hero-card{border-radius:var(--radius-xl); padding:24px;}
    .hero-card-top{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
    .hero-card-logo{width:72px; height:72px; border-radius:20px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.3); flex:0 0 auto;}
    .hero-card h3{margin:0 0 6px; font-size:22px;}
    .hero-card p{margin:0; color:var(--muted); line-height:1.7;}
    .mini-list{display:grid; gap:12px; margin-top:18px;}
    .mini-item{padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);}
    .mini-item strong{display:block; margin-bottom:4px; color:#fff;}
    .mini-item small{display:block; color:var(--soft); line-height:1.55;}
    section{padding:20px 0 34px;}
    .panel{border-radius:var(--radius-xl); padding:28px;}
    .section-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:24px;}
    .label{
      display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px;
      background:rgba(62,200,255,.08); border:1px solid rgba(62,200,255,.12); color:#bfeaff; font-size:13px; font-weight:800; margin-bottom:14px;
    }
    .section-head h2{margin:0; font-size:clamp(28px, 4vw, 42px); line-height:1.06; color:#fff;}
    .section-head p{margin:0; max-width:720px; color:var(--muted); line-height:1.7;}
    .grid{display:grid; gap:22px;}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .card{
      min-height:100%; border-radius:var(--radius-lg); padding:24px; background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.06);
    }
    .feature-icon{
      width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
      background:linear-gradient(180deg, rgba(62,200,255,.12), rgba(143,227,107,.08)); color:#dff7ff; font-weight:800; margin-bottom:14px;
    }
    .card h3{margin:0 0 10px; font-size:20px; color:#fff;}
    .card p,.card li{color:var(--muted); line-height:1.72;}
    .project-card{border-radius:var(--radius-xl); padding:28px; display:flex; flex-direction:column; gap:18px;}
    .project-top{display:flex; justify-content:space-between; align-items:start; gap:16px; flex-wrap:wrap;}
    .project-tag{
      display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px;
      background:rgba(143,227,107,.10); border:1px solid rgba(143,227,107,.16); color:#cff4b8; font-size:13px; font-weight:800;
    }
    .project-card h3{margin:0 0 8px; font-size:28px; color:#fff;}
    .project-card p{margin:0; color:var(--muted); line-height:1.75; max-width:860px;}
    .project-list{margin:0; padding-left:18px; color:var(--muted); display:grid; gap:10px;}
    .project-actions{display:flex; flex-wrap:wrap; gap:12px;}
    .link-btn{
      display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 16px;
      border-radius:12px; text-decoration:none; font-weight:800; color:#d8efff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    }
    .link-btn.primary{color:#071126; background:linear-gradient(180deg,#b9eeff,#8ce8ff); border-color:transparent;}
    .skills{display:flex; flex-wrap:wrap; gap:10px;}
    .chip{
      display:inline-flex; min-height:36px; align-items:center; padding:0 14px; border-radius:999px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:#deebff; font-size:14px; font-weight:700;
    }
    .timeline{display:grid; gap:16px;}
    .timeline-item{display:grid; grid-template-columns:140px 1fr; gap:18px; padding:18px 0; border-top:1px solid rgba(255,255,255,.06);}
    .timeline-item:first-child{border-top:0; padding-top:0}
    .time{color:#86a2c8; font-size:14px; font-weight:700;}
    .timeline-item h3{margin:0 0 6px; font-size:20px; color:#fff;}
    .timeline-item p{margin:0; color:var(--muted); line-height:1.75;}
    .contact-box{border-radius:var(--radius-xl); padding:28px;}
    .contact-box h2{margin:0 0 10px; font-size:clamp(28px, 4vw, 40px); color:#fff;}
    .contact-box p{margin:0 0 20px; color:var(--muted); line-height:1.75; max-width:760px;}
    .contact-list{display:grid; gap:14px;}
    .contact-row{
      display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
      padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    }
    .contact-row strong{display:block; margin-bottom:4px; color:#fff;}
    .contact-row small{color:var(--soft);}
    .contact-row span,.contact-row a{color:#fff; text-decoration:none; font-weight:700;}
    .contact-row a:hover{text-decoration:underline}
    .footer{padding:42px 0 56px; color:#7286a1; font-size:14px;}
    .footer-box{
      display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:18px 22px; border-radius:18px;
      background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    }
    @media (max-width:1040px){
      .hero-grid,.grid-3,.grid-2,.hero-metrics{grid-template-columns:1fr;}
    }
    @media (max-width:780px){
      .topbar-inner{align-items:flex-start}
      .nav{width:100%}
      .hero{padding-top:56px}
      .hero-actions{flex-direction:column}
      .btn,.link-btn{width:100%}
      .panel,.hero-card,.project-card,.contact-box,.card{padding:22px}
      .timeline-item{grid-template-columns:1fr; gap:8px}
    }
  
    .email-actions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .copy-btn{
      min-height:40px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#fff;
      font:inherit;
      font-weight:700;
      cursor:pointer;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .copy-btn:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.08);
      border-color:rgba(62,200,255,.20);
    }

    .scroll-top{
      position:fixed;
      right:24px;
      bottom:24px;
      width:50px;
      height:50px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      font-size:22px;
      color:#fff;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(12px);
      box-shadow:0 12px 32px rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
      z-index:60;
    }

    .scroll-top:hover{
      transform:translateY(-2px);
      background:rgba(62,200,255,.16);
      border-color:rgba(62,200,255,.26);
    }

    @media (max-width:780px){
      .scroll-top{
        right:16px;
        bottom:16px;
      }
    }