@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}


    
    
  


    :root{
      --bg:#f3d98b;
      --bg2:#ead078;
      --panel:rgba(12,17,25,.88);
      --panel2:rgba(17,24,35,.94);
      --gold1:#f8e5ad;
      --gold2:#ddb76c;
      --gold3:#a8772f;
      --gold4:#6f4918;
      --text:#17120b;
      --muted:#5d4b2b;
      --line:rgba(224,188,112,.18);
      --shadow:0 24px 60px rgba(0,0,0,.42);
      --radius:28px;
    }

    html[data-theme="dark"]{
      --bg:#f4efe5;
      --bg2:#ece4d6;
      --panel:rgba(250,247,240,.92);
      --panel2:rgba(244,238,226,.96);
      --text:#211b14;
      --muted:#6f665a;
      --line:rgba(151,103,34,.20);
      --shadow:0 22px 56px rgba(74,52,22,.14);
    }
    html[data-theme="dark"] body{
      background:
        radial-gradient(circle at 16% 12%, rgba(198,154,72,.16), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(168,119,47,.09), transparent 20%),
        linear-gradient(180deg,#f7f2e8 0%,#eee6d8 48%,#f7f2e8 100%);
    }
    html[data-theme="dark"] body::before{
      background:
        linear-gradient(rgba(67,47,21,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67,47,21,.028) 1px, transparent 1px);
      opacity:.22;
    }
    html[data-theme="dark"] .gold-text{
      background:linear-gradient(180deg,#8c5e1f,#b58134 48%,#6e4514);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      text-shadow:0 1px 0 rgba(255,255,255,.55),0 8px 18px rgba(96,65,24,.12);
    }
    html[data-theme="dark"] .nav{background:rgba(249,245,236,.82)}
    html[data-theme="dark"] .brand-mark{
      background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.65),transparent 28%),linear-gradient(180deg,#f8f1e4,#eadcc4);
      box-shadow:0 10px 22px rgba(76,53,24,.12)
    }
    html[data-theme="dark"] .hero-copy,
    html[data-theme="dark"] .hero-photo,
    html[data-theme="dark"] .contact-card{
      background:linear-gradient(180deg,rgba(252,249,243,.96),rgba(239,231,217,.94));
    }
    html[data-theme="dark"] .eyebrow{background:rgba(110,75,22,.05);color:#7d541c}
    html[data-theme="dark"] .fact,
    html[data-theme="dark"] .contact-item{background:rgba(107,74,27,.04);border-color:rgba(151,103,34,.14)}
    html[data-theme="dark"] .photo-caption{
      background:linear-gradient(180deg,rgba(255,250,241,.28),rgba(239,228,209,.88));
      border-color:rgba(151,103,34,.18)
    }
    html[data-theme="dark"] .hub-center{
      background:
        radial-gradient(circle at 36% 26%,rgba(255,255,255,.72),transparent 30%),
        linear-gradient(180deg,rgba(250,245,235,.98),rgba(232,221,202,.98));
      box-shadow:0 24px 52px rgba(82,57,24,.16),0 0 0 8px rgba(151,103,34,.035),inset 0 1px 0 rgba(255,255,255,.8);
    }
    html[data-theme="dark"] .service-node{
      color:#251d14;
      background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.72),transparent 26%),
        linear-gradient(180deg,#f7eddb 0%,#eadcc5 55%,#d9c3a1 100%);
      box-shadow:0 12px 25px rgba(82,57,24,.16),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 7px rgba(111,74,24,.08);
    }
    html[data-theme="dark"] .service-node.active{filter:brightness(.99);border-color:rgba(145,93,22,.58)}
    html[data-theme="dark"] .hub-service li{color:#51483d}
    html[data-theme="dark"] .desktop-nav a,
    html[data-theme="dark"] .btn.secondary{color:#292016;background:rgba(110,75,22,.05);border-color:rgba(110,75,22,.12)}
    html[data-theme="dark"] .contact-item a,
    html[data-theme="dark"] .contact-item span:last-child{color:#3a3025}
    html[data-theme="dark"] input,
    html[data-theme="dark"] textarea{background:rgba(255,255,255,.58);color:#211b14;border-color:rgba(151,103,34,.16)}
    html[data-theme="dark"] label{color:#4d4031}
    html[data-theme="dark"] .footer-box{background:rgba(107,74,27,.035);border-color:rgba(107,74,27,.09)}
    html[data-theme="dark"] .mobile-dock{
      background:linear-gradient(180deg,rgba(247,241,230,.96),rgba(231,220,200,.97));
      border-color:rgba(151,103,34,.20);box-shadow:0 18px 42px rgba(74,52,22,.18),inset 0 1px 0 rgba(255,255,255,.75)
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;color-scheme:dark light}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
      background:
        radial-gradient(circle at 16% 12%, rgba(219,177,91,.10), transparent 24%),
        radial-gradient(circle at 88% 16%, rgba(45,80,145,.11), transparent 20%),
        linear-gradient(180deg,#05070a 0%,#0a111a 48%,#05070a 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed; inset:0; pointer-events:none;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size:40px 40px;
      opacity:.12;
      mask-image:radial-gradient(circle at center, #000 38%, transparent 90%);
    }
    .material-symbols-rounded{
      font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
      font-weight:700;line-height:1;display:inline-grid;place-items:center;
    }

    /* Core Web Vitals: skip expensive below-the-fold rendering until needed */
    #services,#contact,footer{content-visibility:auto;contain-intrinsic-size:1px 800px}
    img{max-width:100%;height:auto}
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    }

    a{color:inherit}
    button,input,textarea{font:inherit}
    .container{width:min(1180px,calc(100% - 22px));margin-inline:auto}

    .gold-text{
      background:linear-gradient(180deg,var(--gold1),var(--gold2) 48%,var(--gold3));
      -webkit-background-clip:text;background-clip:text;color:transparent;
      text-shadow:0 1px 0 rgba(255,255,255,.12),0 12px 22px rgba(0,0,0,.28);
    }
    .gold-frame{
      border:1px solid transparent;
      background:
        linear-gradient(var(--panel),var(--panel)) padding-box,
        linear-gradient(145deg,rgba(248,229,173,.72),rgba(168,119,47,.38),rgba(248,229,173,.10)) border-box;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow);
    }
    .foil{position:relative;overflow:hidden}
    .foil::after{
      content:"";position:absolute;inset:-150% auto -150% -55%;width:30%;
      transform:rotate(22deg);pointer-events:none;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
      animation:shine 7s ease-in-out infinite;
    }
    @keyframes shine{0%,22%{left:-55%;opacity:0}25%{opacity:1}38%{left:125%;opacity:.6}100%{left:125%;opacity:0}}

    /* header */
    .topbar{position:sticky;top:8px;z-index:50;padding-top:8px}
    .nav{
      min-height:64px;padding:10px 12px;border-radius:20px;
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      backdrop-filter:blur(18px);background:rgba(8,11,17,.70)
    }
    .brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
    .brand-mark{
      width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;padding:6px;
      background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),transparent 28%),linear-gradient(180deg,#1b2230,#090d14);
      border:1px solid rgba(221,183,108,.28);box-shadow:0 10px 24px rgba(0,0,0,.3)
    }
    .brand-mark img{width:100%;height:100%;object-fit:contain}
    .brand-copy{min-width:0}
    .brand-copy strong{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .brand-copy small{display:block;color:var(--muted);font-size:.74rem;margin-top:1px}
    .desktop-nav{display:none}

    /* hero */
    .hero{padding:16px 0 10px}
    .hero-grid{display:grid;gap:12px}
    .hero-copy,.hero-photo,.contact-card{border-radius:var(--radius);padding:20px;background:linear-gradient(180deg,rgba(15,22,32,.94),rgba(7,10,16,.90))}
    .eyebrow{
      display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
      color:var(--gold1);font-size:.76rem;background:rgba(255,255,255,.03);border:1px solid var(--line)
    }
    .hero h1{font-size:1.82rem;line-height:1.42;margin:12px 0 10px}
    .hero p{margin:0;color:var(--muted);line-height:1.95;font-size:.9rem}
    .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
    .btn{
      min-height:48px;border:0;border-radius:15px;padding:11px 14px;cursor:pointer;text-decoration:none;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.88rem;transition:.22s ease
    }
    .btn:active{transform:scale(.98)}
    .btn.primary{color:#15120d;background:linear-gradient(180deg,var(--gold1),var(--gold2));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 24px rgba(167,119,47,.18)}
    .btn.secondary{color:var(--text);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
    .facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
    .fact{padding:12px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(221,183,108,.10)}
    .fact.full{grid-column:1/-1}
    .fact small{display:block;color:var(--muted);font-size:.72rem;margin-bottom:4px}
    .fact strong{display:block;font-size:.84rem;line-height:1.75}

    .hero-photo{padding:10px;position:relative}
    .hero-photo img{width:100%;aspect-ratio:4/4.85;object-fit:cover;object-position:center top;border-radius:20px;display:block}
    .photo-caption{
      position:absolute;right:22px;left:22px;bottom:22px;padding:13px 15px;border-radius:18px;
      background:linear-gradient(180deg,rgba(7,10,15,.22),rgba(7,10,15,.88));
      border:1px solid rgba(221,183,108,.14);backdrop-filter:blur(9px);
      text-align:center
    }
    .photo-caption strong{display:block;font-size:.98rem;margin-bottom:3px}
    .photo-caption span{display:block;color:var(--muted);font-size:.76rem}

    /* services */
    .section{padding:18px 0}
    .section-head{text-align:center;margin-bottom:10px}
    .section-head h2{font-size:1.45rem;margin:0 0 6px}
    .section-head p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.8}

    .service-orbit-wrap{position:relative;margin:4px auto 0;width:min(100%,390px)}
    .service-orbit{
      --orbit-radius:132px;
      --node-size:76px;
      width:100%;aspect-ratio:1/1;position:relative;margin-inline:auto;
    }
    .service-orbit::before,.service-orbit::after{
      content:"";position:absolute;border-radius:50%;pointer-events:none
    }
    .service-orbit::before{inset:9%;border:1px solid rgba(221,183,108,.13)}
    .service-orbit::after{inset:17%;border:1px dashed rgba(221,183,108,.09)}

    .hub-center{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:168px;height:168px;border-radius:50%;z-index:4;
      display:grid;place-items:center;padding:18px;text-align:center;
      background:
        radial-gradient(circle at 36% 26%,rgba(255,255,255,.08),transparent 30%),
        linear-gradient(180deg,rgba(18,26,38,.98),rgba(7,10,16,.98));
      border:1px solid rgba(221,183,108,.34);
      box-shadow:0 24px 52px rgba(0,0,0,.42),0 0 0 8px rgba(221,183,108,.025),inset 0 1px 0 rgba(255,255,255,.04);
      overflow:hidden;
    }
    .hub-center::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(221,183,108,.13);pointer-events:none}
    .hub-logo{width:78%;height:78%;object-fit:contain;transition:.28s ease}
    .hub-logo-caption{position:absolute;right:16px;left:16px;bottom:14px;font-size:.6rem;line-height:1.5;text-align:center;font-weight:700;letter-spacing:.1px}
    .hub-service{display:none;position:relative;z-index:2;width:100%;animation:fadeIn .22s ease}
    .hub-center.is-service .hub-logo,.hub-center.is-service .hub-logo-caption{display:none}
    .hub-center.is-service .hub-service{display:block}
    .hub-service .material-symbols-rounded{font-size:1.65rem;color:var(--gold2)}
    .hub-service h3{font-size:.84rem;line-height:1.45;margin:4px 0 5px}
    .hub-service ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
    .hub-service li{font-size:.61rem;color:#ddd2bd;line-height:1.45}
    @keyframes fadeIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

    .service-node{
      --angle:0deg;
      position:absolute;left:50%;top:50%;z-index:5;
      width:var(--node-size);height:var(--node-size);border-radius:50%;border:1px solid rgba(221,183,108,.26);
      transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--angle)));
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;cursor:pointer;color:var(--text);
      background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.14),transparent 26%),
        linear-gradient(180deg,#273043 0%,#111722 55%,#080b11 100%);
      box-shadow:0 12px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -2px 8px rgba(0,0,0,.30);
      transition:box-shadow .2s ease,border-color .2s ease,filter .2s ease;
    }
    .service-node::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(221,183,108,.10);pointer-events:none}
    .service-node .material-symbols-rounded{color:var(--gold2);font-size:1.28rem}
    .service-node span:last-child{font-size:.62rem;line-height:1.35;font-weight:700;max-width:64px}
    .service-node.active{border-color:rgba(248,229,173,.72);box-shadow:0 0 0 3px rgba(221,183,108,.11),0 14px 30px rgba(0,0,0,.4);filter:brightness(1.08)}
    .service-node[data-service="0"]{--angle:0deg}
    .service-node[data-service="1"]{--angle:45deg}
    .service-node[data-service="2"]{--angle:90deg}
    .service-node[data-service="3"]{--angle:135deg}
    .service-node[data-service="4"]{--angle:180deg}
    .service-node[data-service="5"]{--angle:225deg}
    .service-node[data-service="6"]{--angle:270deg}
    .service-node[data-service="7"]{--angle:315deg}

    /* contact */
    .contact-grid{display:grid;gap:12px}
    .contact-card h2{font-size:1.25rem;margin:0 0 12px}
    .contact-list{display:grid;gap:8px}
    .contact-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
    .contact-item .material-symbols-rounded{color:var(--gold2);margin-top:2px}
    .contact-item strong{display:block;font-size:.82rem;margin-bottom:2px}
    .contact-item a,.contact-item span:last-child{font-size:.78rem;color:#e5dccd;text-decoration:none;line-height:1.8}
    form{display:grid;gap:10px}
    .field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .field{display:grid;gap:6px}
    label{font-size:.76rem;color:#e7ddcd}
    input,textarea{
      width:100%;border:1px solid rgba(221,183,108,.12);background:rgba(255,255,255,.03);color:var(--text);
      border-radius:14px;padding:12px 13px;outline:none;font-size:.82rem
    }
    textarea{min-height:110px;resize:vertical}
    input:focus,textarea:focus{border-color:rgba(221,183,108,.56);box-shadow:0 0 0 3px rgba(221,183,108,.08)}

    footer{padding:6px 0 112px}
    .footer-box{padding:14px 16px;border-radius:18px;color:var(--muted);font-size:.72rem;text-align:center;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}

    /* floating utility controls */
    .utility-tools{
      position:fixed;right:14px;bottom:100px;z-index:98;display:flex;flex-direction:column;gap:9px;
    }
    .utility-btn{
      width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,239,193,.66);cursor:pointer;
      display:grid;place-items:center;color:#17120b;
      background:
        radial-gradient(circle at 34% 24%,rgba(255,255,255,.36),transparent 23%),
        linear-gradient(145deg,var(--gold1) 0%,var(--gold2) 42%,var(--gold3) 72%,var(--gold4) 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -3px 7px rgba(83,49,10,.25),0 9px 20px rgba(0,0,0,.30);
      transition:transform .2s ease,opacity .2s ease,visibility .2s ease;
    }
    .utility-btn:active{transform:scale(.95)}
    .utility-btn .material-symbols-rounded{font-size:1.35rem}
    .scroll-top-btn{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
    .scroll-top-btn.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
    .theme-btn .theme-light-icon{display:none}
    html[data-theme="dark"] .theme-btn .theme-dark-icon{display:none}
    html[data-theme="dark"] .theme-btn .theme-light-icon{display:inline}

    /* mobile circular dock */
    .mobile-dock{
      position:fixed;z-index:100;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);
      width:min(365px,calc(100% - 18px));height:74px;
      display:flex;align-items:center;justify-content:space-between;gap:5px;padding:8px 9px;
      border-radius:999px;
      background:linear-gradient(180deg,rgba(18,23,31,.94),rgba(7,10,15,.96));
      border:1px solid rgba(221,183,108,.20);backdrop-filter:blur(18px);
      box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04)
    }
    .dock-btn,.dock-logo{
      width:54px;height:54px;flex:0 0 54px;border-radius:50%;text-decoration:none;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;
      background:
        radial-gradient(circle at 34% 24%,rgba(255,255,255,.36),transparent 23%),
        linear-gradient(145deg,var(--gold1) 0%,var(--gold2) 42%,var(--gold3) 72%,var(--gold4) 100%);
      color:#17120b;border:1px solid rgba(255,239,193,.74);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 7px rgba(83,49,10,.28),0 8px 18px rgba(0,0,0,.32);
    }
    .dock-btn::after,.dock-logo::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(111,73,24,.25);pointer-events:none}
    .dock-btn .material-symbols-rounded{font-size:1.22rem}
    .dock-btn span:last-child{font-size:.53rem;font-weight:800}
    .dock-logo{
      width:68px;height:68px;flex-basis:68px;transform:translateY(-12px);padding:9px;
      background:
        radial-gradient(circle at 32% 24%,rgba(255,255,255,.12),transparent 28%),
        linear-gradient(180deg,#202937,#090d14);
      border:2px solid var(--gold2);
      box-shadow:0 13px 28px rgba(0,0,0,.42),0 0 0 3px rgba(221,183,108,.10),inset 0 1px 0 rgba(255,255,255,.06)
    }
    .dock-logo img{width:100%;height:100%;object-fit:contain}

    @media (min-width:760px){
      .container{width:min(1180px,calc(100% - 36px))}
      .topbar{top:12px;padding-top:12px}
      .nav{padding:12px 16px}
      .brand-mark{width:52px;height:52px;flex-basis:52px}
      .brand-copy strong{font-size:1rem}.brand-copy small{font-size:.8rem}
      .desktop-nav{display:flex;gap:8px}
      .desktop-nav a{padding:9px 12px;border-radius:12px;text-decoration:none;font-size:.84rem;color:var(--text);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055)}
      .hero{padding:28px 0 14px}
      .hero-grid{grid-template-columns:1.05fr .95fr;gap:18px}
      .hero-copy,.hero-photo,.contact-card{padding:26px}
      .hero h1{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.28}
      .hero p{font-size:1rem}
      .hero-actions{display:flex}.btn{min-width:150px}
      .facts{grid-template-columns:repeat(3,1fr)}.fact.full{grid-column:auto}
      .section{padding:28px 0}.section-head h2{font-size:2rem}.section-head p{font-size:.95rem}
      .service-orbit-wrap{width:min(100%,760px)}
      .service-orbit{--orbit-radius:250px;--node-size:126px}
      .hub-center{width:310px;height:310px;padding:34px}
      .hub-logo{width:78%;height:78%}
      .hub-service .material-symbols-rounded{font-size:2.4rem}
      .hub-service h3{font-size:1.18rem;margin:8px 0 10px}
      .hub-service ul{gap:5px}.hub-service li{font-size:.83rem}
      .service-node{gap:8px;padding:14px}.service-node .material-symbols-rounded{font-size:1.8rem}.service-node span:last-child{font-size:.88rem;max-width:105px}
      .contact-grid{grid-template-columns:.9fr 1.1fr;gap:18px}
      .contact-card h2{font-size:1.5rem}.contact-item strong{font-size:.9rem}.contact-item a,.contact-item span:last-child{font-size:.86rem}
      footer{padding-bottom:34px}
      .mobile-dock{display:none}
      .utility-tools{right:24px;bottom:24px}
      .utility-btn{width:52px;height:52px}
    }

    @media (max-width:360px){
      .service-orbit{--orbit-radius:119px;--node-size:69px}
      .hub-center{width:150px;height:150px;padding:16px}
      .hub-logo-caption{font-size:.53rem;bottom:11px}
      .service-node span:last-child{font-size:.57rem;max-width:58px}
      .service-node .material-symbols-rounded{font-size:1.15rem}
      .mobile-dock{width:calc(100% - 12px);padding-inline:6px;gap:3px}
      .dock-btn{width:49px;height:49px;flex-basis:49px}.dock-logo{width:62px;height:62px;flex-basis:62px}
    }
  
/* Performance/accessibility safeguards */
img{max-width:100%;height:auto}
.section{content-visibility:auto;contain-intrinsic-size:700px}
.hero{content-visibility:visible}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

.theme-switch{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 border-radius:999px;
 padding:8px 14px;
 cursor:pointer;
 font-weight:700;
}
html[data-theme="dark"] body{
 color:#f7f1e6;
}