/* dotrec Studio — shared styles: fonts, liquid glass, logo motion, nav, buttons */

@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Kalameh";src:url("../assets/fonts/Kalameh-900.woff2") format("woff2");font-weight:900;font-display:swap}

/* base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#0B0807;color:#F5F0ED;font-family:Kalameh,Vazirmatn,Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:#FF4A5C}
a:hover{color:#F5F0ED}
::selection{background:#EE223B;color:#fff}
:focus-visible{outline:2px solid #FF4A5C;outline-offset:3px}
.bodoni{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svg-defs{position:absolute}

/* liquid glass */
.lg{position:relative}
.lg-fx,.lg-tint,.lg-shine,.lg-spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.lg-fx{-webkit-backdrop-filter:blur(8px) saturate(1.6) brightness(1.05);backdrop-filter:blur(8px) saturate(1.6) brightness(1.05)}
@supports not (background:-webkit-named-image(i)){.lg-fx{filter:url(#lg-panel)}.lg-fx.is-pill{filter:url(#lg-pill)}.lg-fx.is-btn{filter:url(#lg-btn)}}
.lg-tint{background:linear-gradient(165deg,rgba(255,150,158,.1),rgba(150,14,30,.1) 48%,rgba(22,6,6,.4))}
.lg-shine{box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.36),inset -1px -1px 1px rgba(255,255,255,.12)}
.lg-spec{background:radial-gradient(circle 320px at var(--mx,30vw) var(--my,-10vh),rgba(255,255,255,.1),rgba(255,255,255,0) 65%) fixed}
.lg-c{position:relative}

/* logo */
.dr-logo{display:block;overflow:visible}
.fa-logo{display:block;height:30px;width:auto;overflow:visible}
.fa-wipe{animation:fa-wipe 1.1s var(--dl,0s) cubic-bezier(.65,0,.25,1) both}
@keyframes fa-wipe{from{transform:translateX(1520px)}to{transform:translateX(0)}}

.dr-fall{animation:dr-fall 1s var(--dl,0s) both}
.dr-squash{transform-origin:212px 449px;animation:dr-squash 1s var(--dl,0s) both}
.dr-lamp{animation:dr-blink 2.6s calc(var(--dl,0s) + 2.1s) infinite}
.dr-ring{fill:none;stroke:#EE223B;stroke-width:var(--rw,1.5px);vector-effect:non-scaling-stroke;transform-origin:212px 224px;opacity:0;animation:dr-ring 1.2s calc(var(--dl,0s) + .47s) cubic-bezier(.2,.7,.3,1) forwards}
.dr-word{animation:dr-out 1.15s calc(var(--dl,0s) + .5s) cubic-bezier(.16,1,.3,1) both}
.brand:hover .dr-ring,.dr-host:hover .dr-ring{animation:dr-ring2 .9s cubic-bezier(.2,.7,.3,1)}
@keyframes dr-fall{0%{transform:translateY(-640px);animation-timing-function:cubic-bezier(.55,0,1,.45)}47%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.55,.45,1)}63%{transform:translateY(-38px);animation-timing-function:cubic-bezier(.55,0,1,.45)}77%,100%{transform:translateY(0)}}
@keyframes dr-squash{0%{transform:scale(.9,1.12)}44%{transform:scale(.92,1.1)}50%{transform:scale(1.14,.83)}60%{transform:scale(.95,1.06)}77%{transform:scale(1.05,.95)}86%{transform:scale(.99,1.01)}100%{transform:scale(1,1)}}
@keyframes dr-ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
@keyframes dr-ring2{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
@keyframes dr-out{0%{transform:translateX(-1150px)}100%{transform:translateX(0)}}
@keyframes dr-blink{0%,58%{opacity:1}66%,86%{opacity:.3}96%,100%{opacity:1}}

/* nav */
.nav-wrap{position:absolute;top:16px;left:0;right:0;z-index:20;display:flex;justify-content:center;padding:0 24px}
.nav{width:100%;max-width:1240px;height:64px;border-radius:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px 0 10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.brand{display:flex;align-items:center;text-decoration:none}
.nav-links{display:flex;align-items:center}
.nav-link{position:relative;display:flex;align-items:center;justify-content:center;width:104px;height:44px;border-radius:22px;color:rgba(245,240,237,.74);text-decoration:none;font-size:15px;font-weight:500;transition:color .3s}
.nav-link:hover,.nav-link[aria-current="page"]{color:#fff}
.nav-lens{position:absolute;top:0;right:0;width:104px;height:44px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05));box-shadow:inset 1px 1px 0 rgba(255,255,255,.42),inset -1px -1px 0 rgba(255,255,255,.1),0 6px 16px -6px rgba(0,0,0,.7),0 0 20px rgba(238,34,59,.22);transition:transform .6s cubic-bezier(.34,1.56,.5,1)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-login{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:22px;color:rgba(245,240,237,.82);text-decoration:none;font-size:15px;font-weight:500}
.nav-login:hover{color:#fff}
.nav-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;border:0;padding:0;background:rgba(255,255,255,.08);color:#F5F0ED;cursor:pointer;box-shadow:inset 1px 1px 0 rgba(255,255,255,.3)}

/* mobile menu sheet */
.sheet{position:absolute;top:84px;left:12px;right:12px;z-index:25;border-radius:24px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 50px -20px rgba(0,0,0,.95)}
.sheet .lg-tint{background:rgba(24,8,9,.8)}
.sheet-link{display:flex;align-items:center;height:48px;padding:0 16px;border-radius:16px;color:#F5F0ED;text-decoration:none;font-size:16px;font-weight:500}
.sheet-link:hover,.sheet-link[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}

/* buttons */
.btn-red{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border:0;border-radius:25px;overflow:hidden;color:#fff;text-decoration:none;font:inherit;font-weight:700;font-size:16px;white-space:nowrap;cursor:pointer;background:linear-gradient(180deg,#E3263C,#B9121F);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 8px rgba(70,0,10,.45),0 0 0 1px rgba(255,110,122,.35),0 14px 34px -10px rgba(238,34,59,.65);transition:transform .3s ease,box-shadow .3s ease}
.btn-red:hover{color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(70,0,10,.45),0 0 0 1px rgba(255,130,140,.55),0 18px 40px -10px rgba(238,34,59,.85)}
.btn-red.btn-sm{height:44px;padding:0 18px;border-radius:22px;font-size:15px}
.btn-glass{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:24px;background:none;color:#F5F0ED;text-decoration:none;font:inherit;font-weight:500;font-size:15px;white-space:nowrap;cursor:pointer;transition:transform .3s ease}
.btn-glass:hover{color:#fff;transform:translateY(-2px)}
.btn-glass:hover .lg-tint{background:linear-gradient(165deg,rgba(255,170,178,.2),rgba(170,20,40,.2) 50%,rgba(30,8,8,.34))}
.rec{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#EE223B;box-shadow:0 0 10px 2px rgba(238,34,59,.7);animation:rec-blink 1.6s steps(1,end) infinite}
@keyframes rec-blink{0%,62%{opacity:1}63%,100%{opacity:.25}}

/* atmosphere */
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 95% at 50% 42%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}

/* entrance */
.is-intro .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* phone */
@media (min-width:761px){.sheet{display:none}}
@media (max-width:760px){
.nav-wrap{top:12px;padding:0 12px}
.nav-links,.nav-login{display:none}
.nav-menu{display:inline-flex}
}
@media (max-width:480px){.nav .btn-sm{display:none}}