:root{
    --bg-0:#f6f6f7;
    --bg-1:#fbfbfc;
    --bg-2:#eaeaed;
    --blue-glow:#2f6fed;
    --blue-mid:#3b7bff;
    --blue-bright:#1c53d6;
    --text-main:#42454d;
    --text-strong:#16171c;
    --text-soft:#83858d;
    --glass-fill: rgba(255,255,255,0.35);
    --glass-fill-strong: rgba(255,255,255,0.55);
    --glass-border: rgba(140,142,155,0.22);
    --glass-border-strong: rgba(59,123,255,0.4);
    --glass-rim-top: rgba(255,255,255,0.95);
    --glass-rim-bottom: rgba(150,150,165,0.25);
    --card-shadow: rgba(30,30,40,0.14);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    color-scheme: light;
  }

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

  html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }

  body{
    background: var(--bg-0);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, sans-serif;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
    transition: background .4s ease, color .4s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Kontakt formasidagi maydonlarda matn kiritish/tanlash odatdagidek
     ishlashi kerak — faqat sayt matnini nusxalashning oldi olinadi. */
  input, textarea{
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }

  ::selection{ background: rgba(59,123,255,0.22); color: var(--text-strong); }

  .bg-field{
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background:
      radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg-2) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 40%, var(--bg-1) 100%);
    transition: background .4s ease;
  }
  .blob{
    position:absolute; border-radius:50%;
    filter: blur(52px);
    opacity:0.4;
    animation: drift 26s var(--ease) infinite alternate;
    transition: opacity .4s ease;
    will-change: transform;
    transform: translateZ(0);
  }
  .blob-a{ width:44vw; height:44vw; top:-12%; left:-8%;
    background: radial-gradient(circle at 30% 30%, #b9cdf5 0%, transparent 72%); }
  .blob-b{ width:36vw; height:36vw; top:22%; right:-12%;
    background: radial-gradient(circle at 60% 40%, #c7d6f7 0%, transparent 72%);
    animation-duration: 32s; animation-delay:-6s; }
  .blob-c{ width:48vw; height:48vw; bottom:-18%; left:18%;
    background: radial-gradient(circle at 50% 50%, #a9c2f2 0%, transparent 72%);
    animation-duration: 40s; animation-delay:-14s; }
  .blob-d{ width:26vw; height:26vw; top:48%; left:78%;
    background: radial-gradient(circle at 40% 40%, #d3ddf2 0%, transparent 70%);
    opacity:0.2; animation-duration: 36s; animation-delay:-20s; }


  @keyframes drift{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(4%, 6%) scale(1.08); }
    100%{ transform: translate(-5%, -3%) scale(0.96); }
  }

  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .glass{
    position:relative;
    background: linear-gradient(155deg, var(--glass-fill-strong) 0%, var(--glass-fill) 100%);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      inset 0 1px 0 var(--glass-rim-top),
      inset 0 34px 44px -34px var(--glass-rim-top),
      inset 0 -18px 28px -24px var(--glass-rim-bottom),
      0 24px 56px -24px var(--card-shadow),
      0 20px 50px -18px rgba(60,100,200,0.3);
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }

  /* Same look, no backdrop-filter — backdrop blur is the single most expensive
     part of this design, and it doesn't need to run separately for every
     small chip on the page. Used on tags, buttons, mini stat cards and
     contact links; the few large content panels keep full .glass. */
  .glass-flat{
    position:relative;
    background: linear-gradient(155deg, var(--glass-fill-strong) 0%, var(--glass-fill) 100%);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-lg);
    box-shadow:
      inset 0 1px 0 var(--glass-rim-top),
      inset 0 34px 44px -34px var(--glass-rim-top),
      inset 0 -18px 28px -24px var(--glass-rim-bottom),
      0 24px 56px -24px var(--card-shadow),
      0 20px 50px -18px rgba(60,100,200,0.3);
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }

  .glass-interactive{ transition: transform .45s var(--ease-spring), border-color .35s ease, box-shadow .35s ease; }
  .glass-interactive:hover{
    transform: translateY(-5px) scale(1.012);
    border-color: var(--glass-border-strong);
    box-shadow:
      inset 0 1px 0 var(--glass-rim-top),
      0 26px 60px -18px var(--card-shadow);
  }
  .glass-interactive:active{
    transform: translateY(-1px) scale(0.99);
    transition: transform .15s ease;
  }

  a{ color:inherit; text-decoration:none; }

  h1,h2,h3,.display{
    font-family:'Bricolage Grotesque', sans-serif;
    color: var(--text-strong);
    letter-spacing:-0.02em;
    font-variation-settings: "opsz" 40;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--blue-bright);
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--blue-mid);
    box-shadow: 0 0 10px 2px rgba(59,123,255,0.55);
  }

  .wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(24px, 5vw, 64px); }
  section{ position:relative; z-index:2; padding: clamp(46px, 6vw, 84px) 0; }

  .nav-shell{
    position:fixed; top:22px; left:50%; transform:translateX(-50%);
    z-index:100; display:flex; align-items:center; gap:6px;
    padding:8px 8px 8px 20px;
    border-radius:999px;
    max-width: calc(100vw - 24px);
  }
  .nav-shell .logo{
    font-family:'Bricolage Grotesque'; font-weight:700; color:var(--text-strong);
    margin-right:14px; font-size:16px; letter-spacing:0.01em;
    flex-shrink:0;
  }
  .nav-links{
    display:flex; gap:2px; position:relative;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    min-width:0;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{
    position:relative; z-index:2; flex-shrink:0;
    padding:9px 16px; font-size:13.5px; font-weight:500;
    color: var(--text-soft);
    border-radius:999px;
    white-space:nowrap;
    transition: color .3s ease;
  }
  .nav-links a.active{ color: var(--blue-bright); }
  @media (hover:hover) and (pointer:fine){
    .nav-links a:hover{ color: var(--blue-bright); }
  }
  .nav-pill{
    position:absolute; top:0; left:0; height:100%;
    background: linear-gradient(155deg, rgba(59,123,255,0.16), rgba(59,123,255,0.05));
    border:1px solid var(--glass-border-strong);
    border-radius:999px;
    box-shadow: inset 0 1px 0 var(--glass-rim-top);
    transition: transform .55s var(--ease-spring), width .55s var(--ease-spring);
    z-index:1;
  }

  /* Mobile: fits by shrinking, and scrolls horizontally if still tight —
     min-width:0 above lets the row actually shrink/scroll inside its
     fixed-width parent instead of silently overflowing off-screen. */
  @media (max-width: 720px){
    .nav-links a{ padding:8px 12px; font-size:12px; }
    .nav-shell{ gap:2px; padding:7px 7px 7px 16px; }
  }
  @media (max-width: 420px){
    .nav-shell .logo{ margin-right:8px; font-size:14px; }
    .nav-links a{ padding:7px 10px; font-size:11.5px; }
  }

  .hero{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:150px 0 90px; }
  .hero h1{
    font-size: clamp(48px, 9vw, 112px);
    line-height:0.96;
    font-weight:700;
    margin-bottom:34px;
  }
  .hero h1 span{ display:block; }
  .hero h1 .last{
    background: linear-gradient(100deg, var(--blue-mid), var(--blue-bright) 55%, #6a9bff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-style: italic;
  }

  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    padding:15px 30px; border-radius:999px; font-size:14.5px; font-weight:600;
  }
  .btn-primary{
    background: linear-gradient(155deg, rgba(59,123,255,0.9), rgba(59,123,255,0.7));
    border:1px solid rgba(59,123,255,0.6);
    color: #ffffff;
    box-shadow: 0 16px 34px -14px rgba(59,123,255,0.65);
  }
  .btn-ghost{ color: var(--text-strong); border:1px solid var(--glass-border); }

  .hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
  .tag{
    padding:9px 17px; border-radius:999px; font-size:12.5px; font-weight:500;
    color: var(--blue-bright);
  }
  .tag-primary{
    background: linear-gradient(155deg, rgba(59,123,255,0.95), rgba(59,123,255,0.75));
    color:#ffffff; font-weight:600;
    box-shadow: 0 12px 26px -10px rgba(59,123,255,0.55);
  }

  .about-grid{ display:grid; grid-template-columns: 1fr; gap:24px; }
  .about-card, .skills-card, .results-card, .contact-card, .exp-item{
    --glass-fill: rgba(255,255,255,0.5);
    --glass-fill-strong: rgba(255,255,255,0.72);
  }
  .about-card{ padding:44px; }
  .about-card p{ font-size:16px; line-height:1.85; color:var(--text-main); margin-bottom:16px; }
  .trait-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .trait-row .tag{ font-size:12px; padding:7px 14px; }
  .about-card strong{ color: var(--blue-bright); font-weight:600; }

  .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
  .results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .stat{ padding:26px 18px; text-align:center; }
  .stat .num{ font-family:'Bricolage Grotesque'; font-size:30px; font-weight:700; color:var(--text-strong); }
  .stat .num.counting{ color: var(--blue-bright); }
  .stat .lbl{ font-size:11.5px; color:var(--text-soft); margin-top:6px; letter-spacing:0.04em; text-transform:uppercase; }

  @media (max-width: 720px){
    .results-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width: 560px){
    .stat-row{ grid-template-columns:repeat(1,1fr); }
    .results-grid{ grid-template-columns:repeat(1,1fr); }
  }

  .skill{ margin-bottom:26px; }
  .skill-top{ display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:10px; }
  .skill-top .name{ color:var(--text-strong); font-weight:600; }
  .skill-top .val{ color:var(--blue-bright); font-family:'JetBrains Mono'; font-size:12.5px; }
  .track{
    height:10px; border-radius:999px; overflow:hidden;
    background: rgba(59,123,255,0.08);
    border:1px solid rgba(59,123,255,0.16);
  }
  .fill{
    height:100%; width:100%; border-radius:999px;
    background: linear-gradient(90deg, #7fb0ff, var(--blue-bright));
    box-shadow: 0 0 14px 1px rgba(59,123,255,0.45);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--ease);
    will-change: transform;
  }
  .skill-desc{ font-size:13px; line-height:1.55; color:var(--text-soft); margin-top:10px; }
  .skills-card{ padding:44px; }
  .results-card{ padding:44px; }
  .skill-extra{ margin-top:30px; }
  .skill-extra-label{ font-size:11.5px; color:var(--text-soft); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; font-weight:600; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .info-item{ padding:14px 16px; border-radius:var(--radius-sm); }
  .info-item .info-name{ font-size:13.5px; font-weight:600; color:var(--blue-bright); margin-bottom:5px; }
  .info-item .info-desc{ font-size:12px; line-height:1.5; color:var(--text-soft); }
  .book-item{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-sm); }
  .book-item img{
    width:50px; height:72px; object-fit:cover; border-radius:8px; flex-shrink:0;
    box-shadow: 0 6px 14px rgba(20,30,60,0.18);
  }
  @media (max-width: 640px){
    .book-item img{ width:42px; height:60px; }
  }
  .book-item .info-name{ font-size:13.5px; font-weight:600; color:var(--blue-bright); margin-bottom:4px; }
  .book-item .info-desc{ font-size:12px; line-height:1.5; color:var(--text-soft); }
  @media (max-width: 560px){
    .info-grid{ grid-template-columns:1fr; }
  }

  .method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .method-card{ padding:34px 28px; }
  .method-num{
    font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600;
    color: var(--blue-mid); opacity:0.65;
  }
  .method-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .icon-circle{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(59,123,255,0.12); color: var(--blue-bright);
  }
  .icon-circle svg{ width:21px; height:21px; }
  .stat .icon-circle{ margin:0 auto 12px; }
  .lang-flag{
    width:42px; height:42px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px; overflow:hidden; padding:5px;
    background: #fff;
    border: 1px solid rgba(59,123,255,0.14);
  }
  .lang-flag img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto; }
  .tool-badge{
    width:42px; height:42px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:10px; overflow:hidden; padding:7px;
    background: rgba(59,123,255,0.06);
    border: 1px solid rgba(59,123,255,0.12);
  }
  .tool-badge img{ width:100%; height:100%; object-fit:contain; }
  .tool-badge svg{ width:100%; height:100%; }
  .tool-badge.has-bg{ padding:7px; }
  .tool-badge.has-bg img{ object-fit:contain; }
  @media (max-width: 640px){
    .lang-flag, .tool-badge{ width:36px; height:36px; border-radius:8px; margin-bottom:8px; }
    .tool-badge{ padding:6px; }
    .lang-flag{ padding:4px; }
  }
  .info-item{ display:flex; flex-direction:column; }
  .method-card h3{ font-size:19px; margin-bottom:10px; }

  .certs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:900px; margin:0 auto; align-items:stretch; }
  .cert-card{
    display:flex; flex-direction:column; margin:0;
    padding:20px; text-decoration:none;
  }
  .cert-card img{
    width:100%; aspect-ratio:4/3; object-fit:contain;
    border-radius:14px; display:block;
    margin-bottom:20px; border:1px solid var(--glass-border);
    background: rgba(255,255,255,0.5);
  }
  .cert-info h3{ font-size:20px; margin-bottom:6px; }
  .cert-link-label{
    display:inline-flex; align-items:center; gap:4px;
    margin-top:12px; font-size:13px; font-weight:600;
    color: var(--blue-bright);
  }
  .method-card p{ font-size:14.5px; line-height:1.75; color:var(--text-main); }
  @media (max-width: 780px){
    .certs-grid{ grid-template-columns:1fr; max-width:640px; }
  }
  @media (max-width: 780px){
    .method-grid{ grid-template-columns:1fr; }
  }

  .project-card{
    display:block; max-width:760px; margin:0 auto; padding:40px 44px;
  }
  .project-top{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
  .project-mark{
    width:60px; height:60px; border-radius:16px; flex-shrink:0;
    object-fit:cover; display:block;
    border:1px solid var(--glass-border);
    box-shadow: 0 10px 24px -10px rgba(59,123,255,0.4);
  }
  .project-card h3{ font-size:24px; }
  .project-card p{ font-size:15.5px; line-height:1.8; color:var(--text-main); margin-bottom:26px; max-width:56ch; }
  .project-links{ display:flex; flex-wrap:wrap; gap:14px; }
  .project-links .clink{ flex:1 1 220px; }

  .timeline{ position:relative; }
  .exp-item{ position:relative; padding:28px 30px; margin-bottom:20px; }
  .exp-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:4px; }
  .exp-status{ font-size:11px; padding:5px 12px; border-radius:999px; color:#1f9d63; border:1px solid rgba(31,157,99,0.3); background:rgba(31,157,99,0.08); }
  .exp-status.ended{ color:#7482a0; border-color:rgba(116,130,160,0.3); background:rgba(116,130,160,0.08); }
  .exp-status.cert{ color:var(--blue-bright); border-color:rgba(59,123,255,0.3); background:rgba(59,123,255,0.08); }
  .exp-item h3{ font-size:21px; margin-bottom:4px; }
  .exp-item .role{ color:var(--text-soft); font-size:14px; }
  .exp-desc{ color:var(--text-soft); font-size:13.5px; line-height:1.6; margin-top:8px; }

  .contact-card{ padding:56px 44px; text-align:center; }
  .contact-card h2{ font-size:clamp(30px,5vw,46px); margin-bottom:14px; }
  .contact-card > p{ color:var(--text-soft); max-width:480px; margin:0 auto 40px; font-size:15.5px; }
  .contact-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; text-align:left; }
  .clink{ display:flex; align-items:center; gap:14px; padding:18px 20px; }
  .clink .ic{
    width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background: rgba(59,123,255,0.12); color: var(--blue-bright); font-size:16px; flex-shrink:0;
  }
  .clink .ic svg{ width:20px; height:20px; }
  .clink .meta small{ display:block; color:var(--text-soft); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
  .clink .meta span{ color:var(--text-strong); font-size:14.5px; font-weight:500; }
  @media (max-width:640px){ .contact-links{ grid-template-columns:1fr; } }

  .contact-form{
    margin-top:32px; text-align:left;
    display:flex; flex-direction:column; gap:14px;
  }
  .contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:640px){ .contact-form .form-row{ grid-template-columns:1fr; } }
  .contact-form label{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--text-soft); margin-bottom:6px; font-weight:600;
  }
  .contact-form input, .contact-form textarea{
    width:100%; font-family:inherit; font-size:14.5px; color:var(--text-strong);
    background: var(--glass-fill, #fff); border:1px solid var(--glass-border-strong);
    border-radius:12px; padding:12px 14px; resize:vertical; transition: border-color .25s ease, box-shadow .25s ease;
  }
  .contact-form input:focus, .contact-form textarea:focus{
    outline:none; border-color:var(--blue-bright);
    box-shadow: 0 0 0 3px rgba(59,123,255,0.15);
  }
  .contact-form textarea{ min-height:110px; }
  .contact-form .form-submit{
    align-self:flex-start; margin-top:4px;
    font-family:inherit; font-size:14.5px; font-weight:600; color:#fff;
    background: var(--blue-bright); border:none; border-radius:999px;
    padding:13px 30px; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease;
  }
  .contact-form .form-submit:hover{ transform:translateY(-2px); box-shadow: 0 10px 22px rgba(59,123,255,0.3); }
  .contact-form .form-note{ font-size:12px; color:var(--text-soft); margin-top:-2px; }

  footer{ text-align:center; padding:40px 0 60px; color:var(--text-soft); font-size:12px; position:relative; z-index:2; }

  .sec-head{ margin-bottom:36px; }
  .sec-head h2{ font-size:clamp(28px,4.4vw,42px); }

  .reveal{
    opacity:0;
    transform: translateY(64px) scale(.96);
    filter: blur(10px);
    transition:
      opacity .8s cubic-bezier(.19,1,.22,1),
      transform 1s cubic-bezier(.19,1,.22,1),
      filter .8s cubic-bezier(.19,1,.22,1);
    will-change: opacity, transform, filter;
  }
  .reveal.show{ opacity:1; transform:none; filter:blur(0px); }

  .reveal-child{
    opacity:0;
    transform: translateY(42px);
    filter: blur(7px);
    transition:
      opacity .6s cubic-bezier(.19,1,.22,1),
      transform .8s cubic-bezier(.19,1,.22,1),
      filter .6s cubic-bezier(.19,1,.22,1);
  }
  .reveal-child.show{ opacity:1; transform:none; filter:blur(0px); }


  /* .tilt's own transform is now driven frame-by-frame in JS (lerp loop),
     so it deliberately has NO transform transition here — CSS easing and
     a value that's being rewritten every animation frame fight each other
     and produce a laggy/rubbery feel on fast mouse movement. Only the
     non-tilt properties keep a CSS transition. */
  .tilt{
    transition: border-color .35s ease, box-shadow .35s ease;
    will-change: transform;
  }

  /* .reveal / .reveal-child also declare their own full `transition`
     shorthand, and since `transition` doesn't merge across classes (the
     most specific / last-matching rule wins entirely), plain `.tilt`
     was silently cancelling their transform transition whenever an
     element carried both classes. These two-class selectors are more
     specific than either alone, so they resolve deterministically
     regardless of source order and restore the intended entrance
     animation while still excluding transform from the interactive part. */
  .reveal.tilt{
    transition:
      opacity .8s cubic-bezier(.19,1,.22,1),
      transform 1s cubic-bezier(.19,1,.22,1),
      filter .8s cubic-bezier(.19,1,.22,1),
      border-color .35s ease,
      box-shadow .35s ease;
  }
  .reveal-child.tilt{
    transition:
      opacity .6s cubic-bezier(.19,1,.22,1),
      transform .8s cubic-bezier(.19,1,.22,1),
      filter .6s cubic-bezier(.19,1,.22,1),
      border-color .35s ease,
      box-shadow .35s ease;
  }

  .divider{ width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(24px, 5vw, 64px); }
  .divider svg{ width:100%; height:36px; display:block; overflow:visible; }
  .divider path{
    fill:none; stroke:url(#waveGrad); stroke-width:2; stroke-linecap:round;
    stroke-dasharray: 6 10;
    animation: wave-flow 5s linear infinite;
  }
  @keyframes wave-flow{
    to{ stroke-dashoffset:-160; }
  }
  @media (prefers-reduced-motion: reduce){
    .divider path{ animation:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .blob{ animation:none; }
    .reveal{ transition:none; opacity:1; transform:none; filter:none; }
    .reveal-child{ transition:none; opacity:1; transform:none; filter:none; }
    .tilt{ transition:none; }
    .reveal.tilt{ transition:none; opacity:1; transform:none; filter:none; }
    .reveal-child.tilt{ transition:none; opacity:1; transform:none; filter:none; }
  }

  @media (max-width: 560px){
    .about-card{ padding:28px 22px; }
    .skills-card{ padding:28px 22px; }
    .contact-card{ padding:36px 22px; }
    .method-card{ padding:26px 22px; }
    .exp-item{ padding:22px 20px; }
    .hero-actions{ width:100%; gap:10px; }
    .hero-actions .btn{
      flex:0 1 auto; text-align:center; white-space:nowrap;
      padding:13px 22px; font-size:13.5px;
    }
  }