@font-face{font-family:BYekan;src:url('../fonts/BYekan.ttf') format('truetype');font-display:swap}
@font-face{font-family:BMitra;src:url('../fonts/BMitra.ttf') format('truetype');font-display:swap}
@font-face{font-family:Nas;src:url('../fonts/Nas.ttf') format('truetype');font-display:swap}

:root{
  --header-h:78px;
  --cyan:#2be1ff;
  --cyan-2:#00a9e8;
  --gold:#f6d05d;
  --ink:#082d31;
  --surface:#f8fbffda;
  --pill-text:#082f4b;
  --pill-bg:#f6fbffea;
  --pill-shadow:0 8px 22px rgba(0,0,0,.16);
  --glow:rgba(35,221,255,.78);
  --edge-a:#ef2626;
  --edge-b:#080808;
  --edge-soft:rgba(239,38,38,.42);
  --glass-feature:rgba(255,255,255,.16);
  --glass-feature-border:rgba(255,255,255,.14);
  --hero-text:#0d3643;
}

html[data-theme="dark"]{
  --surface:#071928c9;
  --pill-text:#f8fbff;
  --pill-bg:#062038e8;
  --pill-shadow:0 10px 28px rgba(0,0,0,.42);
  --glow:rgba(22,221,255,.9);
  --edge-a:#ffd84d;
  --edge-b:#9d6a00;
  --edge-soft:rgba(255,216,77,.46);
  --glass-feature:rgba(6,25,42,.26);
  --glass-feature-border:rgba(255,255,255,.08);
  --hero-text:#fff8e6;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;scroll-behavior:smooth}
body{background:#0a2740;color:var(--ink);overflow-x:hidden}
body,button,a{font-family:BYekan,Arial,sans-serif}
button{cursor:pointer}

.landing-shell{
  position:relative;min-height:100svh;isolation:isolate;overflow:hidden;
  background-image:url('../images/bg_day.png');
  background-position:center top;background-size:cover;background-repeat:no-repeat;
}
html[data-theme="dark"] .landing-shell{background-image:url('../images/bg_night.png')}
.landing-shell::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 44%,rgba(40,14,0,.10));
}

@property --edge-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow-ring{isolation:isolate;position:relative}
.glow-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--edge-angle),transparent 0 72%,var(--edge-b) 78%,var(--edge-a) 84%,#fff9d2 88%,var(--edge-a) 92%,transparent 98% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px var(--edge-soft));
  animation:edgeOrbit 2.8s linear infinite;
}
@keyframes edgeOrbit{to{--edge-angle:360deg}}

.glass-panel{background:none;backdrop-filter:none}

.topbar{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:0;
  width:100%;margin:0 auto;padding:8px 10px 0;position:relative;z-index:25;direction:ltr;
}
.nav-group{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-pill{
  direction:rtl;position:relative;display:grid;place-items:center;min-width:138px;height:50px;padding:0 28px;
  border:0;border-radius:22px;background:var(--pill-bg);color:var(--pill-text);font-size:22px;font-weight:700;text-decoration:none;
  box-shadow:inset 0 0 12px rgba(255,255,255,.12),var(--pill-shadow);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;
}
.nav-pill--wide{min-width:178px}
.nav-pill:hover,.nav-pill:focus-visible{transform:translateY(-2px) scale(1.02);outline:none;box-shadow:0 0 10px var(--glow),0 0 22px rgba(0,214,255,.26),inset 0 0 14px rgba(255,255,255,.16),var(--pill-shadow)}
.theme-toggle{min-width:118px}
.theme-icon{position:absolute;font-size:30px;line-height:1;transition:.3s ease}
.theme-icon.moon{opacity:0;transform:scale(.7) rotate(-30deg);color:#fff1a3}
html[data-theme="dark"] .theme-icon.sun{opacity:0;transform:scale(.7) rotate(25deg)}
html[data-theme="dark"] .theme-icon.moon{opacity:1;transform:scale(1) rotate(0)}

.hero{
  width:min(1240px,92vw);margin:-52px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding-top:0;min-height:26vh;position:relative;z-index:12;
}
.brand-logo{
  width:min(560px,36vw);max-height:205px;object-fit:contain;margin-top:-26px;margin-bottom:0;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));animation:logoFloat 4.4s ease-in-out infinite,logoGlow 3.2s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 8px 10px rgba(0,0,0,.18)) drop-shadow(0 0 3px rgba(255,222,77,.2))}50%{filter:drop-shadow(0 8px 10px rgba(0,0,0,.2)) drop-shadow(0 0 16px rgba(0,211,255,.42)) drop-shadow(0 0 9px rgba(255,214,75,.36))}}
.eyebrow{
  margin:-24px 0 0;font-family:Nas,BYekan,Arial,sans-serif;font-size:25px;font-weight:700;color:var(--hero-text);
  text-shadow:0 1px 2px rgba(255,255,255,.25);
}
.eyebrow-tight{margin-top:-46px !important; position:relative; z-index:2;}
.ornament{display:flex;align-items:center;gap:10px;width:32%;color:#cfa234;margin:-2px 0 .18rem}
.ornament span{height:4px;background:linear-gradient(90deg,rgba(207,162,52,.18) 0%,rgba(230,188,82,.96) 55%,rgba(207,162,52,.18) 100%);flex:1;opacity:.95;border-radius:999px;box-shadow:0 0 8px rgba(214,168,52,.26)}
.ornament b{font-size:24px;color:#c29b27}
.hero h1{
  font-family:Nas,BYekan,Arial,sans-serif;font-size:clamp(42px,3.5vw,62px);line-height:1.06;margin:0 0 18px;color:var(--hero-text);
  text-shadow:0 2px 8px rgba(255,255,255,.12);
}
.hero-subtitle{
  font-family:BMitra,BYekan,sans-serif;font-size:clamp(24px,1.8vw,31px);line-height:1.08;margin:0 0 8px;color:var(--hero-text);
}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .hero h1,html[data-theme="dark"] .hero-subtitle{color:var(--hero-text);text-shadow:0 2px 8px rgba(0,0,0,.66)}

.feature-row{display:none !important}
.feature{display:none !important}

.food-zone{position:absolute;left:0;right:0;bottom:.45vh;z-index:10;padding:0 .25vw}
.slider-shell{max-width:none;width:100%;margin:auto;position:relative;direction:ltr}
.slider-viewport{overflow:hidden;position:relative;padding:8px 8px 16px;width:100%}
.food-slider-track{display:flex;gap:16px;will-change:transform;transform:translate3d(0,0,0)}
.food-card{
  position:relative;overflow:hidden;flex:0 0 auto;width:270px;height:176px;border-radius:20px;background:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.food-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--edge-angle),transparent 0 75%,var(--edge-b) 81%,var(--edge-a) 87%,#fff8d9 90%,var(--edge-a) 93%,transparent 98% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 3px var(--edge-soft));
  animation:edgeOrbit 3.4s linear infinite;
}
.food-card img{width:100%;height:100%;object-fit:cover;display:block}
.food-overlay{position:absolute;inset:auto 0 0;padding:28px 16px 12px;background:linear-gradient(transparent,rgba(0,0,0,.92));color:#fff;z-index:2;text-align:right}
.food-overlay h2{margin:0;font-size:24px;line-height:1}
.food-overlay p{font-family:BMitra,BYekan,sans-serif;margin:4px 0 0;font-size:20px;line-height:1.04}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(15,18,24,.48);color:#fff;font-size:44px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(8px);box-shadow:0 10px 20px rgba(0,0,0,.24);z-index:6;
}
.slider-arrow:hover{background:rgba(0,175,215,.58)}
.prev{left:6px}.next{right:6px}
.slider-dots{display:none;justify-content:center;gap:8px}
.slider-dots button{width:14px;height:14px;border:0;border-radius:50%;background:rgba(255,255,255,.74);padding:0;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.slider-dots button.active{background:#05e6e8;box-shadow:0 0 12px #00eaff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1180px){
  :root{--header-h:72px}
  .topbar{padding-inline:8px}
  .nav-group{gap:8px}
  .nav-pill{min-width:114px;height:45px;font-size:18px;padding-inline:18px;border-radius:19px}
  .nav-pill--wide{min-width:146px}
  .theme-toggle{min-width:90px}
  .hero{width:94vw;min-height:24vh;margin-top:-34px}
  .brand-logo{width:min(470px,36vw);max-height:174px;margin-top:-18px}
  .feature-row{display:none !important}
  .food-card{height:168px}
}

@media (max-width:760px){
  :root{--header-h:58px}
  .landing-shell{background-image:url('../images/mobile_day.png');background-position:center top;min-height:100svh;background-size:cover}
  html[data-theme="dark"] .landing-shell{background-image:url('../images/mobile_night.png')}

  .topbar{
    height:auto;min-height:56px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;
    padding:6px 8px 5px;direction:ltr;background:rgba(55,24,0,.18);
  }
  .nav-group{display:contents}
  .nav-pill{min-width:0;width:100%;height:40px;padding:0 4px;border-radius:15px;font-size:clamp(10px,2.9vw,14px);white-space:nowrap}
  .nav-pill--wide{min-width:0}
  .theme-toggle{min-width:0}
  .theme-icon{font-size:22px}

  .hero{width:94vw;margin-top:-8px;min-height:0;transform:translateY(-7px)}
  .brand-logo{width:min(68vw,340px);max-height:140px;margin-top:-2px}
  .eyebrow{font-size:clamp(17px,4.35vw,22px);margin-top:-1px}
  .eyebrow-tight{margin-top:-14px !important}
  .ornament{width:62%;margin-top:-2px;margin-bottom:0}
  .hero h1{font-size:clamp(21px,5.55vw,29px);line-height:1.08;margin:3px 0 10px;white-space:nowrap}
  .hero-subtitle{font-size:clamp(16px,4.25vw,22px);line-height:1.08;margin:0 0 4px;max-width:92%;}
  .feature-row{display:none !important}

  .food-zone{bottom:.15vh;padding-inline:4.6vw}
  .slider-shell{display:block}
  .slider-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 0 12px;scrollbar-width:none}
  .slider-viewport::-webkit-scrollbar{display:none}
  .food-slider-track{display:grid;grid-auto-flow:column;gap:10px;transform:none!important;transition:none!important}
  .food-card{width:auto;min-width:calc((100vw - 9.2vw - 10px)/2);max-width:none;height:auto;border-radius:17px;aspect-ratio:1.8/1;scroll-snap-align:start}
  .food-overlay{padding:25px 10px 9px}.food-overlay h2{font-size:clamp(18px,5vw,25px)}.food-overlay p{font-size:clamp(15px,4.1vw,21px);margin-top:2px}
  .slider-arrow{display:none!important}
  .slider-dots{display:flex;gap:7px}.slider-dots button{width:11px;height:11px}
}

@media (max-width:430px){
  .topbar{padding-inline:5px;gap:3px}
  .nav-pill{height:38px;font-size:10.4px}
  .hero{margin-top:-9px;transform:translateY(-8px)}
  .brand-logo{width:66vw;max-height:132px}
  .hero h1{font-size:5.35vw}
  .hero-subtitle{font-size:4.05vw}
  .food-zone{bottom:0}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
