:root{
      --bg:#0a0a0a;
      --panel:rgba(255,255,255,.04);
      --panel-2:rgba(255,255,255,.06);
      --border:rgba(255,255,255,.10);
      --text:rgba(255,255,255,.86);
      --muted:rgba(255,255,255,.62);
      --muted-2:rgba(255,255,255,.44);

      --teal:#4ade80;     /* primary accent */
      --amber:#d4a574;    /* secondary accent */

      --radius:18px;
      --shadow: 0 10px 35px rgba(0,0,0,.45);
      --glass: blur(10px);
      --max: 1120px;

      --serif: "DM Serif Display", ui-serif, Georgia, serif;
      --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background:
        radial-gradient(1000px 500px at 60% -10%, rgba(74,222,128,.10), transparent 55%),
        radial-gradient(900px 450px at 20% 10%, rgba(212,165,116,.08), transparent 55%),
        var(--bg);
      color:var(--text);
      font-family:var(--sans);
      letter-spacing:.01em;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .container{ width:min(var(--max), 92vw); margin:0 auto; }

    /* Top Navigation */
    .nav{
      position:fixed;
      top:0; left:0; right:0;
      z-index:50;
      background: rgba(10,10,10,.55);
      backdrop-filter: var(--glass);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav-inner{
      height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:600;
    }
    .logo{
      width:38px;height:38px;
      border-radius:12px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      font-family:var(--serif);
      letter-spacing:.02em;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:18px;
      color:var(--muted);
      font-weight:500;
    }
    .nav-links a{
      padding:10px 10px;
      border-radius:12px;
    }
    .nav-links a:hover{
      background: rgba(255,255,255,.05);
      color:rgba(255,255,255,.82);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .btn{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color:var(--text);
      padding:10px 14px;
      border-radius:14px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
    .btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{
      background: rgba(74,222,128,.16);
      border-color: rgba(74,222,128,.45);
      color: rgba(255,255,255,.92);
    }
    .btn-primary:hover{
      background: rgba(74,222,128,.20);
      border-color: rgba(74,222,128,.60);
    }
    .btn-ghost{
      background: transparent;
      box-shadow:none;
    }

    /* Sections / layout */
    main{ padding-top: 92px; }
    section{ padding: 72px 0; }
    .section-title{
      font-family:var(--serif);
      letter-spacing:.01em;
      font-weight:400;
      margin:0 0 10px 0;
      font-size: clamp(28px, 3.2vw, 44px);
    }
    .section-sub{
      margin:0 0 24px 0;
      color:var(--muted);
      max-width: 74ch;
      line-height:1.6;
    }

    /* Hero */
    .hero{
      padding-top: 34px;
      padding-bottom: 44px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.4fr .6fr;
      gap:18px;
      align-items:start;
    }
    .hero-card{
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius: calc(var(--radius) + 6px);
      padding: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
      position:relative;
      overflow:hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 260px at 25% 0%, rgba(74,222,128,.16), transparent 60%),
        radial-gradient(600px 220px at 90% 10%, rgba(212,165,116,.12), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .hero-content{ position:relative; }
    .status{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.30);
      color:rgba(255,255,255,.80);
      font-weight:600;
      font-size: 13px;
    }
    .hero-name{
      margin: 16px 0 6px 0;
      font-family:var(--serif);
      font-size: clamp(44px, 5vw, 72px);
      line-height:1.0;
      letter-spacing:.01em;
    }
    .hero-title{
      margin:0 0 14px 0;
      color: var(--teal);
      font-weight:700;
      letter-spacing:.02em;
      font-size: clamp(18px, 1.6vw, 22px);
    }
    .hero-line{
      margin:0 0 18px 0;
      color: var(--muted);
      max-width: 72ch;
      line-height:1.7;
    }
    .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin: 18px 0 22px 0;
    }
    .pill{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      padding: 8px 12px;
      border-radius: 999px;
      color: rgba(255,255,255,.80);
      font-weight:600;
      font-size: 13px;
    }
    .cta-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

    .hero-side{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      border-radius: calc(var(--radius) + 6px);
      padding: 20px;
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
    }
    .hero-side h3{
      font-family:var(--serif);
      font-weight:400;
      margin:0 0 8px 0;
      letter-spacing:.01em;
    }
    .hero-side p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
      font-size:14px;
    }

    .scroll-indicator{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color: var(--muted-2);
      margin-top: 18px;
      font-size: 12px;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .chev{
      width:18px;height:18px;
      display:inline-block;
      border-right:2px solid rgba(255,255,255,.25);
      border-bottom:2px solid rgba(255,255,255,.25);
      transform: rotate(45deg);
      margin-top:-2px;
      animation: bounce 1.35s infinite ease-in-out;
    }
    @keyframes bounce{
      0%,100%{ transform:translateY(0) rotate(45deg); opacity:.55; }
      50%{ transform:translateY(6px) rotate(45deg); opacity:.95; }
    }

    /* Cards */
    .grid{ display:grid; gap:14px; }
    .card{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      border-radius: var(--radius);
      padding: 18px;
      backdrop-filter: var(--glass);
      box-shadow: 0 12px 32px rgba(0,0,0,.35);
    }
    .card-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .card-title{
      font-weight:700;
      letter-spacing:.01em;
      margin:0;
      font-size: 16px;
    }
    .card-meta{
      color:var(--muted);
      font-size: 13px;
      margin-top:4px;
    }
    ul.bullets{
      margin: 10px 0 0 18px;
      padding:0;
      color: rgba(255,255,255,.80);
      line-height:1.6;
    }
    ul.bullets li{ margin: 6px 0; }
    .muted{ color:var(--muted); }
    .divider{ height:1px; background: rgba(255,255,255,.08); margin: 14px 0; }

    /* Expand panel */
    .ai-context{
      display:none;
      margin-top: 12px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(0,0,0,.32);
      border: 1px solid rgba(255,255,255,.10);
    }
    .ai-context p{
      margin: 10px 0;
      color: rgba(255,255,255,.78);
      line-height:1.7;
      font-style: italic;
    }
    .ai-context .k{
      display:block;
      color: rgba(255,255,255,.92);
      font-style: normal;
      font-weight:700;
      letter-spacing:.02em;
      margin-bottom:4px;
    }

    /* Skills matrix */
    .skills-grid{
      grid-template-columns: repeat(3, 1fr);
    }
    .skill-card{
      position:relative;
      overflow:hidden;
    }
    .skill-card .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .tag strong{ font-weight:900; }
    .tag-strong{ color: var(--teal); }
    .tag-gap{ color: var(--amber); }
    .tag-mod{ color: rgba(255,255,255,.65); }
    .skills-list{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:10px;
    }
    .skill{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding: 8px 10px;
      border-radius: 999px;
      font-weight:600;
      font-size: 13px;
      color: rgba(255,255,255,.78);
    }
    .skill.good{ border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
    .skill.gap{ border-color: rgba(212,165,116,.40); background: rgba(212,165,116,.09); }

    /* Analyzer */
    .toggle-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin: 10px 0 12px 0;
    }
    .toggle{
      padding: 9px 12px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(255,255,255,.78);
      cursor:pointer;
      font-weight:700;
      font-size: 13px;
      user-select:none;
    }
    .toggle.active{
      border-color: rgba(74,222,128,.50);
      background: rgba(74,222,128,.10);
      color: rgba(255,255,255,.90);
    }
    textarea{
      width:100%;
      min-height: 180px;
      resize: vertical;
      padding: 14px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.28);
      color: rgba(255,255,255,.88);
      font-family: var(--sans);
      line-height:1.6;
      outline: none;
    }
    textarea:focus{
      border-color: rgba(74,222,128,.45);
      box-shadow: 0 0 0 4px rgba(74,222,128,.08);
    }
    .output{
      display:none;
      margin-top: 14px;
    }
    .verdict{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.30);
      font-weight:800;
      letter-spacing:.02em;
    }
    .verdict.strong{
      border-color: rgba(74,222,128,.55);
      background: rgba(74,222,128,.12);
      color: rgba(255,255,255,.92);
    }
    .verdict.mid{
      border-color: rgba(255,255,255,.20);
      background: rgba(255,255,255,.05);
    }
    .verdict.weak{
      border-color: rgba(212,165,116,.60);
      background: rgba(212,165,116,.12);
      color: rgba(255,255,255,.92);
    }
    .out-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }
    .out-section h4{
      margin:0 0 8px 0;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size: 12px;
      color: rgba(255,255,255,.70);
    }
    .out-section p{
      margin:0;
      color: rgba(255,255,255,.82);
      line-height:1.7;
    }
    .callout{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.30);
      border-radius: 16px;
      padding: 14px;
      margin-top: 14px;
      color: rgba(255,255,255,.78);
      line-height:1.7;
    }
    .callout strong{
      color: rgba(255,255,255,.92);
      font-weight:900;
    }

    /* Drawer */
    .drawer-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(4px);
      z-index:80;
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease;
    }
    .drawer{
      position:fixed;
      top:0; right:0;
      width:min(420px, 92vw);
      height:100%;
      background: rgba(15,15,15,.82);
      border-left:1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
      z-index:90;
      transform: translateX(102%);
      transition: transform .22s ease;
      display:flex;
      flex-direction:column;
    }
    .drawer.open{ transform: translateX(0); }
    .drawer-backdrop.open{
      opacity:1; pointer-events:auto;
    }
    .drawer-header{
      padding: 16px 16px 12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .drawer-header .title{
      font-weight:900;
      letter-spacing:.02em;
    }
    .icon-btn{
      width:40px; height:40px;
      display:grid; place-items:center;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      cursor:pointer;
    }
    .drawer-body{
      padding: 14px 16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      height:100%;
      overflow:hidden;
    }
    .suggestions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .chip{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding: 8px 10px;
      border-radius: 999px;
      cursor:pointer;
      font-weight:700;
      font-size: 12px;
      color: rgba(255,255,255,.75);
      user-select:none;
    }
    .chip:hover{
      border-color: rgba(74,222,128,.35);
      background: rgba(74,222,128,.08);
      color: rgba(255,255,255,.88);
    }
    .chat{
      flex:1;
      overflow:auto;
      padding-right: 4px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .msg{
      max-width: 92%;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.82);
      line-height:1.6;
      white-space:pre-wrap;
      word-wrap:break-word;
    }
    .msg.user{
      align-self:flex-end;
      border-color: rgba(74,222,128,.35);
      background: rgba(74,222,128,.08);
    }
    .msg.ai{
      align-self:flex-start;
      background: rgba(0,0,0,.25);
    }
    .composer{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 12px 0 0 0;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .composer input{
      flex:1;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.28);
      color: rgba(255,255,255,.86);
      outline:none;
    }
    .composer input:focus{
      border-color: rgba(74,222,128,.45);
      box-shadow: 0 0 0 4px rgba(74,222,128,.08);
    }

    /* Footer */
    footer{
      padding: 26px 0 38px 0;
      border-top:1px solid rgba(255,255,255,.08);
      color: var(--muted);
    }
    .footer-inner{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .footer-title{
      font-weight:900;
      color: rgba(255,255,255,.86);
      margin-bottom:6px;
    }
    .social{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .social a{
      width:42px;height:42px;
      display:grid; place-items:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }
    .social a:hover{
      border-color: rgba(74,222,128,.35);
      background: rgba(74,222,128,.08);
    }

    /* Responsive */
    @media (max-width: 920px){
      .hero-grid{ grid-template-columns: 1fr; }
      .skills-grid{ grid-template-columns: 1fr; }
    }