:root{--navy:#062f49;--orange:#ff6a10;--muted:#5a7185}
*{box-sizing:border-box}
html{min-height:100%;background:#05334d}
body{margin:0;font-family:Vazirmatn,Tahoma,Arial,sans-serif;color:var(--navy)}
a{color:inherit;text-decoration:none}
.site-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 49% 49%,#fff 0%,#f9fbfe 22%,#e9f2fa 55%,#caddeb 100%)}
.design-bg{position:absolute;inset:0 0 15.5% 0;overflow:hidden;pointer-events:none;z-index:-1}
.design-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 18%,#ffffff64 19%,transparent 22%,transparent 50%,#ffffff77 51%,#ffffff25 53%,transparent 54%)}
.corner{position:absolute;background:#00334e;filter:drop-shadow(0 0 4px #28495f70)}
.corner-top{width:37%;height:48%;left:0;top:0;clip-path:polygon(0 0,100% 0,70% 42%,44% 42%,0 100%)}
.corner-top:after{content:"";position:absolute;inset:0;background:var(--orange);clip-path:polygon(70% 0,79% 0,49% 43%,33% 43%,0 97%,0 87%,31% 38%,42% 38%)}
.corner-bottom{width:20%;height:25%;right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.corner-bottom:after{content:"";position:absolute;inset:0;background:var(--orange);clip-path:polygon(100% 0,100% 14%,56% 100%,34% 100%)}
.stripe{position:absolute;height:185%;width:9%;top:-35%;transform:rotate(45deg);background:linear-gradient(90deg,#fff0,#fff9,#fff1);box-shadow:8px 0 0 #f5fbff80,13px 0 0 #adcadc25}
.stripe-one{left:24%}.stripe-two{left:31%;width:2%}.stripe-three{right:20%;width:4%}.stripe-four{right:11%;width:2%}
.gears{position:absolute;inset:0;width:100%;height:100%;color:#88a9c3;opacity:.22;filter:drop-shadow(1px 4px 2px #617e9625)}
.content{flex:1;display:flex;align-items:center;flex-direction:column;width:100%;padding:18px 20px 65px;z-index:1}
.brand{text-align:center;line-height:1;display:flex;align-items:center;flex-direction:column}
.brand-symbol{width:108px;height:110px}
.brand-symbol svg{display:block;width:100%;height:100%}
.brand-name{font:900 clamp(30px,3.1vw,46px)/.95 Arial,sans-serif;letter-spacing:-2.3px;margin-top:-1px}
.brand-subtitle{font:700 clamp(9px,.87vw,13px)/1.3 Arial,sans-serif;margin-top:3px;letter-spacing:-.15px}
.brand-tagline{font:700 clamp(10px,.88vw,13px)/1.4 Arial,sans-serif;color:#e66b2a;margin-top:18px}
.hero{text-align:center;margin-top:20px}
.hero h1{font-size:clamp(30px,3.45vw,54px);font-weight:900;letter-spacing:-1.3px;line-height:1.7;margin:0}
.hero h1 span{color:#ef6c1a}
.hero p{font-size:clamp(12px,1.13vw,17px);font-weight:500;color:#60758a;margin:4px 0 0}
.accent-line{width:64px;height:4px;border-radius:9px;background:var(--orange);margin:25px auto 0}
.menu{width:min(856px,100%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.menu-card{min-height:143px;background:#ffffffd9;border:1px solid #e6ebf0;border-radius:21px;box-shadow:0 13px 28px #173d5a19;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:16px 7px 14px;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.menu-card:hover,.menu-card:focus-visible{transform:translateY(-5px);box-shadow:0 18px 34px #173d5a35;outline:none}
.menu-icon{width:49px;height:49px;border-radius:14px;background:linear-gradient(145deg,#dfecf3,#f6f9fb);display:grid;place-items:center;color:#133a55;margin-bottom:8px}
.menu-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-card strong{font-size:18px;font-weight:800;line-height:1.7}
.menu-card small{font-size:11px;color:#8294a2;font-weight:500}
.menu-card.featured{background:linear-gradient(145deg,#ff781b,#ff5e05);border-color:#ff6a10;color:white;box-shadow:0 13px 29px #e972242a}
.featured .menu-icon{background:#ffffff2b;color:#fff}.featured small{color:#ffe5d3}
.menu-hint{margin:18px 0 0;color:#8094a6;font-size:12px}
.footer{min-height:140px;background:linear-gradient(105deg,#00344e 0%,#002b44 65%,#00354d 100%);border-top:6px solid var(--orange);display:flex;align-items:center;justify-content:space-between;padding:15px clamp(25px,4%,60px);gap:28px;color:#fff;position:relative;z-index:2;box-shadow:0 -1px 6px #03263955}
.footer-item{display:flex;align-items:center;gap:25px;white-space:nowrap;min-width:0}
.footer-icon{width:82px;height:82px;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#ff851b,#ff5a00);border-radius:50%;box-shadow:0 4px 9px #001d302b}
.footer-icon svg{width:43px;height:43px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phone .footer-icon svg{width:43px;height:43px}.location .footer-icon svg{width:48px;height:48px}
.footer-text{display:flex;flex-direction:column;gap:3px;font-family:Arial,sans-serif}.footer-text span{font-size:19px;letter-spacing:.1px;font-weight:500}.footer-text a{font-size:clamp(18px,2.1vw,30px);font-weight:700;letter-spacing:.2px}.footer-text a:hover{text-decoration:underline}.footer-text .city{font-size:20px;font-weight:700}
.footer-divider{height:78px;width:2px;background:#f3f7faaf;flex:none}
@media (min-width:1200px) and (min-height:750px){.content{padding-top:18px}.hero{margin-top:21px}.menu{margin-top:27px}}
@media (max-width:1050px){.footer{gap:15px;padding:17px 22px}.footer-item{gap:12px}.footer-icon{width:60px;height:60px}.footer-icon svg{width:35px;height:35px}.footer-text span,.footer-text .city{font-size:14px}.footer-text a{font-size:18px}.footer-divider{height:58px}.footer{min-height:105px}}
@media (max-width:700px){.design-bg{bottom:0}.corner-top{width:75%;height:25%}.corner-bottom{width:34%;height:19%}.content{padding:26px 18px 40px}.brand-symbol{width:82px;height:84px}.brand-name{font-size:34px}.brand-subtitle{font-size:9px}.brand-tagline{font-size:10px;margin-top:15px}.hero{margin-top:26px}.hero h1{font-size:clamp(27px,6vw,36px);line-height:1.5}.hero p{font-size:13px;line-height:2;max-width:460px}.accent-line{margin-top:18px}.menu{margin-top:28px;max-width:440px;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.menu-card{min-height:133px;border-radius:18px}.menu-card strong{font-size:16px}.menu-hint{text-align:center;font-size:11px}.footer{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px;min-height:0}.footer-divider{display:none}.footer-item{gap:11px}.footer-item.location{grid-column:1/-1;justify-content:center;border-top:1px solid #ffffff30;padding-top:12px}.footer-icon{width:49px;height:49px}.footer-icon svg,.location .footer-icon svg{width:29px;height:29px}.footer-text span,.footer-text .city{font-size:11px}.footer-text a{font-size:clamp(12px,2.8vw,17px)}}
@media (max-width:360px){.menu{gap:9px}.menu-card{padding:12px 4px}.menu-card strong{font-size:14px}.footer{padding:14px 10px}.footer-item{gap:7px}.footer-icon{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.menu-card{transition:none}}

/* Mobile header: keep the decorative corner above, not behind, the logo. */
@media (max-width:700px){
  .site-shell{width:100%;max-width:100%;overflow-x:clip}
  .design-bg{z-index:-1}
  .corner-top{width:100%;height:115px;left:0;top:0;clip-path:polygon(0 0,100% 0,74% 0,33% 0,0 68%)}
  .corner-top:after{clip-path:polygon(18% 0,29% 0,0 80%,0 61%)}
  .content{padding-top:125px;min-width:0}
  .brand{position:relative;z-index:1;max-width:100%;width:100%;min-width:0}
  .brand-name{max-width:100%;font-size:clamp(29px,8.5vw,34px)}
  .brand-subtitle{font-size:clamp(7px,2vw,9px);letter-spacing:-.2px;max-width:100%;text-align:center}
  .brand-tagline{font-size:clamp(8px,2.1vw,10px);max-width:100%;text-align:center}
  .hero{width:100%;min-width:0;max-width:100%}
  .hero h1{font-size:clamp(24px,6.2vw,36px);line-height:1.65;letter-spacing:0;overflow-wrap:normal}
  .hero p{max-width:100%;overflow-wrap:break-word}
}
@media (max-width:380px){
  .content{padding-left:14px;padding-right:14px}
  .brand-symbol{width:75px;height:77px}
  .brand-name{letter-spacing:-1.8px}
  .hero h1{font-size:clamp(23px,6.6vw,27px)}
  .menu{gap:9px}
}

/* Mobile-only: move the entire logo and following content well below the top ornament. */
@media (max-width:700px){
  .site-shell > .content{padding-top:220px !important;}
}
@media (max-width:380px){
  .site-shell > .content{padding-top:205px !important;}
}

/* FINAL MOBILE LOGO POSITION — keep emblem fully below diagonal banner */
@media screen and (max-width:700px) {
  .site-shell > main.content { padding-top: 275px !important; }
  .site-shell > main.content > header.brand { margin-top: 0 !important; transform: none !important; }
  .site-shell .design-bg .corner-top { height: 115px !important; }
}
@media screen and (max-width:380px) {
  .site-shell > main.content { padding-top: 255px !important; }
}