*,*::before,*::after{ box-sizing:border-box; }
    img,svg,video,canvas{ max-width:100%; height:auto; }
    html,body{ height:100%; }

    :root{
      --bg:#fbfcff;
      --surface:#ffffff;
      --surface-2:#f2f6ff;

      --text:#0A1222;
      --text-2:#2c4363;
      --muted:#5b7396;
      --line:#dfe7f3;

      --brand:#0E7CFF;
      --brand-2:#6CC3FF;
      --accent:#7B61FF;

      --shadow-card: 0 28px 80px rgba(10,18,34,.10), 0 10px 30px rgba(10,18,34,.08);
      --shadow-card-hover: 0 36px 120px rgba(10,18,34,.14), 0 14px 40px rgba(10,18,34,.10);

      --shadow-soft: 0 18px 50px rgba(10,18,34,.08), 0 2px 8px rgba(10,18,34,.06);
      --shadow-soft-hover: 0 22px 64px rgba(10,18,34,.10), 0 4px 12px rgba(10,18,34,.08);

      --ring: 0 0 0 4px rgba(14,124,255,.28);

      --radius: 20px;
      --radius-lg: 28px;

      --ease: 220ms cubic-bezier(.16,1,.3,1);

      --glass: rgba(255,255,255,.72);
      --glass-strong: rgba(255,255,255,.86);
    }

    @media (prefers-color-scheme: dark){
      html:not(.light){
        --bg:#070b14;
        --surface: rgba(255,255,255,.06);
        --surface-2: rgba(255,255,255,.045);

        --text:#ffffff;
        --text-2: rgba(255,255,255,.86);
        --muted: rgba(255,255,255,.68);
        --line: rgba(255,255,255,.12);

        --shadow-card: 0 30px 90px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.35);
        --shadow-card-hover: 0 40px 130px rgba(0,0,0,.62), 0 14px 34px rgba(0,0,0,.42);

        --shadow-soft: 0 18px 50px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.24);
        --shadow-soft-hover: 0 22px 64px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.30);

        --ring: 0 0 0 4px rgba(108,195,255,.28);

        --glass: rgba(10,18,34,.55);
        --glass-strong: rgba(10,18,34,.72);
      }
    }

    html.dark{
      --bg:#070b14;
      --surface: rgba(255,255,255,.06);
      --surface-2: rgba(255,255,255,.045);

      --text:#ffffff;
      --text-2: rgba(255,255,255,.86);
      --muted: rgba(255,255,255,.68);
      --line: rgba(255,255,255,.12);

      --shadow-card: 0 30px 90px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.35);
      --shadow-card-hover: 0 40px 130px rgba(0,0,0,.62), 0 14px 34px rgba(0,0,0,.42);

      --shadow-soft: 0 18px 50px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.24);
      --shadow-soft-hover: 0 22px 64px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.30);

      --ring: 0 0 0 4px rgba(108,195,255,.28);

      --glass: rgba(10,18,34,.55);
      --glass-strong: rgba(10,18,34,.72);
    }

    html.light{ color-scheme: light; }
    html.dark{ color-scheme: dark; }

    html{
      scroll-behavior:smooth;
      scroll-padding-top:110px;
      background: var(--bg);
    }

    body{
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(14,124,255,.22), transparent 60%),
        radial-gradient(900px 620px at 92% 0%, rgba(123,97,255,.18), transparent 55%),
        radial-gradient(700px 520px at 80% 92%, rgba(108,195,255,.14), transparent 60%),
        repeating-linear-gradient(90deg, rgba(10,18,34,.035) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(10,18,34,.03) 0 1px, transparent 1px 64px),
        var(--bg);
      color: var(--text);
      min-height:100%;
      overflow-x:hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    html.dark body{
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(108,195,255,.12), transparent 60%),
        radial-gradient(900px 620px at 92% 0%, rgba(123,97,255,.12), transparent 55%),
        radial-gradient(700px 520px at 80% 92%, rgba(14,124,255,.10), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
        var(--bg);
    }

    @media (max-width: 480px){
      body{
        background:
          radial-gradient(900px 520px at 15% -10%, rgba(14,124,255,.18), transparent 60%),
          radial-gradient(760px 520px at 90% 0%, rgba(123,97,255,.14), transparent 55%),
          var(--bg);
      }
      html.dark body{
        background:
          radial-gradient(900px 520px at 15% -10%, rgba(108,195,255,.10), transparent 60%),
          radial-gradient(760px 520px at 90% 0%, rgba(123,97,255,.10), transparent 55%),
          var(--bg);
      }
    }

    .text-ink{ color: var(--text); }
    .text-ink2{ color: var(--text-2); }
    .text-muted{ color: var(--muted); }
    .border-line{ border-color: var(--line); }
    .surface{ background: var(--surface); }
    .surface2{ background: var(--surface-2); }

    .shadow-card{ box-shadow: var(--shadow-card); }
    .shadow-soft{ box-shadow: var(--shadow-soft); }

    .rounded-xl2{ border-radius: var(--radius-lg); }
    .rounded-xl{ border-radius: var(--radius); }

    :where(a,button,input,select,textarea):focus-visible{
      outline:none;
      box-shadow: var(--ring);
      border-radius: .95rem;
    }

    :where(a,button){
      transition:
        transform var(--ease),
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease),
        opacity var(--ease),
        filter var(--ease);
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    }

    ::selection{ background: rgba(14,124,255,.22); }
    html.dark ::selection{ background: rgba(108,195,255,.20); }

    .skip-link{
      position: fixed;
      left: .5rem; top: .5rem;
      transform: translateY(-220%);
      z-index: 9999;
      padding: .6rem .85rem;
      border-radius: .85rem;
      background: #000;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 16px 40px rgba(0,0,0,.28);
    }
    .skip-link:focus{ transform: translateY(0); }

    .details-reset summary{ list-style:none; }
    .details-reset summary::-webkit-details-marker{ display:none; }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      text-decoration:none !important;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.05;
      letter-spacing: -0.01em;
      position: relative;
    }

    .btn svg{ width: 18px; height: 18px; flex: 0 0 auto; }

    .btn-gradient{
      position: relative;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
      border: 1px solid rgba(255,255,255,.20);
      background:
        radial-gradient(120% 160% at 18% 0%, rgba(255,255,255,.30), transparent 58%),
        linear-gradient(110deg, var(--brand) 0%, var(--accent) 46%, var(--brand-2) 100%);
      box-shadow:
        0 20px 70px rgba(14,124,255,.22),
        0 10px 26px rgba(10,18,34,.10);
      text-shadow: 0 1px 0 rgba(0,0,0,.18);
      transform: translateZ(0);
    }

    .btn-gradient::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.34) 45%, transparent 60%);
      transform: translateX(-130%);
      transition: transform 900ms cubic-bezier(.16,1,.3,1);
      pointer-events:none;
      mix-blend-mode: overlay;
      opacity:.95;
    }
    .btn-gradient:hover::after{ transform: translateX(130%); }
    .btn-gradient:hover{
      filter: saturate(1.06) contrast(1.02);
      box-shadow:
        0 26px 90px rgba(14,124,255,.26),
        0 14px 34px rgba(10,18,34,.12);
    }

    .btn-outline{
      border: 1px solid rgba(223,231,243,.85);
      background:
        radial-gradient(120% 120% at 12% 0%, rgba(14,124,255,.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
      color: var(--text);
      box-shadow: var(--shadow-soft);
    }
    html.dark .btn-outline{
      background:
        radial-gradient(120% 120% at 12% 0%, rgba(108,195,255,.10), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      border-color: rgba(255,255,255,.14);
      color: var(--text);
    }
    .btn-outline:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft-hover);
      border-color: rgba(14,124,255,.35);
    }
    html.dark .btn-outline:hover{
      border-color: rgba(108,195,255,.30);
    }

    .btn-cta{
      min-height: 56px;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 900;
    }

    .text-gradient{
      background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand-2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      background-size: 200% 100%;
    }

    .brand-dot{
      width: 16px;
      height: 16px;
      border-radius: 999px;
      position: relative;
      overflow: hidden;
      flex: 0 0 auto;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.38),
        0 0 26px rgba(14,124,255,.42),
        0 0 52px rgba(123,97,255,.18);
    }
    .brand-dot::before{
      content:"";
      position:absolute;
      inset:-60%;
      background: conic-gradient(from 140deg, var(--brand), var(--accent), var(--brand-2), var(--brand));
      animation: brandSpin 9s linear infinite;
      filter: saturate(1.25) contrast(1.06);
    }
    .brand-dot::after{
      content:"";
      position:absolute;
      inset:-70%;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.90), transparent 40%),
        radial-gradient(circle at 72% 72%, rgba(108,195,255,.34), transparent 58%);
      mix-blend-mode: overlay;
      opacity: .75;
      animation: brandSheen 3.9s ease-in-out infinite;
    }
    @keyframes brandSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
    @keyframes brandSheen{
      0%,100%{ transform: translate(-14%, -10%) rotate(-14deg); opacity:.55; }
      50%{ transform: translate(14%, 10%) rotate(18deg); opacity:.95; }
    }
    @media (prefers-reduced-motion: reduce){
      .brand-dot::before,.brand-dot::after{ animation: none !important; }
    }

    .theme-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px; height: 44px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
      box-shadow: var(--shadow-soft);
    }
    html.dark .theme-toggle{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      border-color: rgba(255,255,255,.14);
    }
    .theme-toggle:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft-hover);
      border-color: rgba(14,124,255,.35);
    }
    html.dark .theme-toggle:hover{ border-color: rgba(108,195,255,.30); }
    .theme-toggle svg{ width: 18px; height: 18px; }

    .header-glass{
      background: var(--glass-strong);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      box-shadow: 0 14px 40px rgba(10,18,34,.06);
      position: relative;
    }
    html.dark .header-glass{ box-shadow: 0 18px 46px rgba(0,0,0,.35); }
    .header-glass::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,124,255,.22), rgba(123,97,255,.18), rgba(108,195,255,.20), transparent);
      opacity:.55;
      pointer-events:none;
    }

    .header-inner{
      display:grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "brand nav controls";
      align-items:center;
      column-gap: 14px;
      row-gap: 10px;
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
      padding-top: calc(12px + env(safe-area-inset-top));
      padding-bottom: 12px;
    }
    .header-brand{ grid-area: brand; }
    .header-nav{ grid-area: nav; min-width: 0; }
    .header-controls{ grid-area: controls; display:flex; align-items:center; justify-content:flex-end; gap: 10px; min-width: 0; }

    .lang-switch{ display:none; }
    .header-phone-desktop{ display:none; }
    .header-phone-mobile{ display:inline-flex; }

    .header-nav{ display:none; }

    @media (min-width: 768px){
      .header-nav{ display:flex; }
      .lang-switch{ display:flex; }
      .header-phone-desktop{ display:inline-flex; }
      .header-phone-mobile{ display:none; }
      details.mobile-menu{ display:none; }
    }

    @media (max-width: 767.98px){
      .header-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
      }
    }

    nav.header-nav{
      align-items:center;
      justify-content:center;
      gap: 6px;
      flex-wrap: nowrap;
      min-width: 0;
    }

    nav.header-nav a{
      position: relative;
      text-decoration: none !important;
      border-radius: 999px !important;
      padding: 10px 12px !important;
      font-weight: 900;
      color: var(--text-2);
      white-space: nowrap !important;
      line-height: 1;
      letter-spacing: -0.01em;
      background: transparent;
      border: 1px solid transparent;
    }
    nav.header-nav a:hover{
      color: var(--text);
      background: rgba(242,246,255,.62);
      border-color: rgba(223,231,243,.75);
      box-shadow: 0 10px 26px rgba(10,18,34,.05);
      transform: translateY(-1px);
    }
    html.dark nav.header-nav a:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 12px 28px rgba(0,0,0,.25);
    }
    nav.header-nav a[aria-current="page"]{
      color: var(--text);
      background: rgba(242,246,255,.70);
      border-color: rgba(223,231,243,.75);
    }
    html.dark nav.header-nav a[aria-current="page"]{
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.14);
    }

    details.mobile-menu{ position: relative; }
    details.mobile-menu > summary{ cursor: pointer; }
    details.mobile-menu[open] > .mobile-panel{
      animation: dropdownIn var(--ease) both;
      transform-origin: top;
    }

    @keyframes dropdownIn{
      from{ opacity: 0; transform: translateY(-10px) scale(.98); }
      to{ opacity: 1; transform: translateY(0) scale(1); }
    }

    .mobile-panel{
      position: fixed;
      left: 12px;
      right: 12px;
      top: calc(72px + env(safe-area-inset-top));
      max-height: calc(100vh - 92px - env(safe-area-inset-top));
      max-height: calc(100dvh - 92px - env(safe-area-inset-top));
      overflow: auto;
      border-radius: 22px;
      background: var(--glass-strong);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(223,231,243,.85);
      z-index: 60;
      padding-bottom: env(safe-area-inset-bottom);
    }
    html.dark .mobile-panel{ border-color: rgba(255,255,255,.14); }

    .card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,1));
      position: relative;
      overflow: hidden;
    }
    html.dark .card{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      border-color: rgba(255,255,255,.12);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
      .card{
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
    }
    .card:hover{
      transform: translateY(-4px);
      border-color: rgba(14,124,255,.28);
    }
    .shadow-card:hover{ box-shadow: var(--shadow-card-hover); }
    .shadow-soft:hover{ box-shadow: var(--shadow-soft-hover); }

    .section{ scroll-margin-top:110px; }

    #hero{ position: relative; }
    .hero-minh{
      min-height: 72vh;
      min-height: 72svh;
      display:grid;
      place-items:center;
      text-align:center;
    }

    #hero::before{
      content:"";
      position:absolute;
      inset:-260px -260px auto -260px;
      height: 720px;
      background: radial-gradient(closest-side, rgba(14,124,255,.26), transparent 72%);
      filter: blur(52px);
      z-index:-20;
      pointer-events:none;
    }
    #hero::after{
      content:"";
      position:absolute;
      inset:auto -280px -360px -280px;
      height: 700px;
      background: radial-gradient(closest-side, rgba(123,97,255,.22), transparent 72%);
      filter: blur(56px);
      z-index:-20;
      pointer-events:none;
    }
    html.dark #hero::before{ background: radial-gradient(closest-side, rgba(108,195,255,.18), transparent 74%); }
    html.dark #hero::after{ background: radial-gradient(closest-side, rgba(123,97,255,.16), transparent 74%); }

    .hero-actions{
      margin-top: 16px;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap: 12px;
    }
    .hero-actions a{
      min-height: 56px;
      padding: 14px 20px;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      white-space: nowrap;
      box-sizing: border-box;
    }
    @media (max-width: 640px){
      .hero-actions{
        flex-direction: column;
        align-items: stretch;
      }
      .hero-actions a{
        width: min(560px, 100%);
        margin-left:auto;
        margin-right:auto;
      }
    }

    .hero-search{ margin-top: 12px; }
    .search-pill{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(223,231,243,.85);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    html.dark .search-pill{
      border-color: rgba(255,255,255,.14);
      background: rgba(10,18,34,.55);
    }
    .search-pill:focus-within{
      box-shadow: var(--ring), var(--shadow-card);
      border-color: rgba(14,124,255,.55);
      transform: translateY(-1px);
    }
    html.dark .search-pill:focus-within{ border-color: rgba(108,195,255,.45); }

    .search-dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand-2));
      box-shadow: 0 0 0 6px rgba(14,124,255,.10);
      flex: 0 0 auto;
    }
    html.dark .search-dot{ box-shadow: 0 0 0 6px rgba(108,195,255,.10); }

    .search-pill input{
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: none;
      font-weight: 800;
      color: var(--text);
    }
    .search-pill input::placeholder{ color: rgba(91,115,150,.95); font-weight: 700; }
    html.dark .search-pill input::placeholder{ color: rgba(255,255,255,.65); }

    .search-enter{
      padding: 7px 12px;
      border-radius: 14px;
      border: 1px solid rgba(223,231,243,.85);
      background: rgba(255,255,255,.92);
      color: var(--text-2);
      font-weight: 900;
      font-size: .9rem;
      letter-spacing: -0.01em;
      flex: 0 0 auto;
      user-select: none;
    }
    html.dark .search-enter{
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.82);
    }
    @media (max-width: 420px){
      .search-enter{ display:none; }
    }

    .hero-highlights{
      margin-top: 12px;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap: 10px;
    }
    .hero-highlights li{
      border-radius: 999px !important;
      padding: 10px 14px !important;
      background: var(--glass) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(223,231,243,.85) !important;
      box-shadow: var(--shadow-soft) !important;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
      white-space: nowrap;
    }
    html.dark .hero-highlights li{
      border-color: rgba(255,255,255,.14) !important;
      background: rgba(10,18,34,.55) !important;
    }
    .hero-highlights li:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft-hover) !important;
      border-color: rgba(14,124,255,.28) !important;
      background: var(--glass-strong) !important;
    }
    html.dark .hero-highlights li:hover{ border-color: rgba(108,195,255,.26) !important; }

    section.surface2{
      background:
        radial-gradient(900px 420px at 18% 0%, rgba(14,124,255,.08), transparent 60%),
        radial-gradient(820px 380px at 92% 30%, rgba(123,97,255,.07), transparent 60%),
        var(--surface-2);
    }
    html.dark section.surface2{
      background:
        radial-gradient(900px 420px at 18% 0%, rgba(108,195,255,.08), transparent 62%),
        radial-gradient(820px 380px at 92% 30%, rgba(123,97,255,.07), transparent 62%),
        var(--surface-2);
    }

    .services-grid{
      display:grid;
      gap: 18px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 720px){
      .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px){
      .services-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    .about-cta{ margin-top: 34px; }
    @media (min-width: 640px){ .about-cta{ margin-top: 42px; } }

    .cta-banner{
      position: relative;
      overflow: hidden;
      padding: 22px;
    }
    @media (min-width: 640px){ .cta-banner{ padding: 26px; } }
    .cta-banner::after{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(520px 220px at 12% 0%, rgba(14,124,255,.14), transparent 62%),
        radial-gradient(560px 240px at 92% 40%, rgba(123,97,255,.12), transparent 62%);
      opacity:.65;
      pointer-events:none;
      z-index:0;
    }
    html.dark .cta-banner::after{
      background:
        radial-gradient(520px 220px at 12% 0%, rgba(108,195,255,.12), transparent 62%),
        radial-gradient(560px 240px at 92% 40%, rgba(123,97,255,.10), transparent 62%);
      opacity:.55;
    }
    .cta-banner > *{ position:relative; z-index:1; }
    .cta-layout{
      display:flex;
      flex-wrap: wrap;
      align-items:center;
      justify-content: space-between;
      gap: 16px;
    }
    .cta-actions{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      width: min(520px, 100%);
    }
    @media (min-width: 640px){
      .cta-actions{ grid-template-columns: 1fr 1fr; }
    }
    .cta-actions a{
      width:100%;
      justify-content:center;
      min-height: 56px;
      padding: 14px 18px;
      border-radius: 999px;
      font-weight: 900;
      white-space: nowrap;
    }

    .loc-divider{
      margin-top: 26px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,124,255,.22), rgba(123,97,255,.18), rgba(108,195,255,.20), transparent);
      opacity: .65;
    }
    html.dark .loc-divider{ opacity: .55; }

    .social-icon{
      width: 44px;
      height: 44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    html.dark .social-icon{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
      border-color: rgba(255,255,255,.14);
    }
    .social-icon:hover{
      transform: translateY(-2px);
      border-color: rgba(14,124,255,.28);
      box-shadow: var(--shadow-soft-hover);
    }
    html.dark .social-icon:hover{ border-color: rgba(108,195,255,.26); }
    .social-icon svg{ width: 18px; height: 18px; color: var(--text-2); }
    .social-icon:hover svg{ color: var(--text); }

    footer[role="contentinfo"]{ position: relative; }
    footer[role="contentinfo"]::before{
      content:"";
      position:absolute;
      left:0; right:0; top:-1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,124,255,.18), rgba(123,97,255,.14), rgba(108,195,255,.16), transparent);
      opacity:.6;
      pointer-events:none;
    }

    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }