/* ===== Noy Online ===== */
:root{
  --accent:#c5a5ff; --brand:#8d31b6; --deep:#241039; --soft:#d5c8e5; --white:#fff;
  --line:rgba(255,255,255,.1); --card:rgba(255,255,255,.04);
  --bg1:#241039; --bg2:#301049; --bg3:#1f0c31; --foot:#150820;
  --f:'Heebo',system-ui,sans-serif; --serif:'Playfair Display',Georgia,serif;
  --pad:clamp(20px,6.94vw,100px);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg1);color:var(--white);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--accent);color:var(--deep);padding:10px 16px;border-radius:10px;z-index:100;font-weight:600}
.skip:focus{top:12px}
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.ico{width:17px;height:17px;flex:none}

/* type */
.h1{font-size:clamp(40px,4.25vw,61px);line-height:1.08;font-weight:600;letter-spacing:-.048em}
.h2{font-size:clamp(36px,4vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.04em}
.h2--xl{font-size:clamp(42px,5vw,72px)}
.h1 em,.h2 em{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--accent);letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.85;color:var(--soft);max-width:490px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.05em}
.eyebrow span{width:24px;height:1px;background:var(--accent)}
.eyebrow--plain{margin-bottom:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .3s,border-color .3s}
.btn .ico{transition:transform .35s var(--ease)}
.btn:hover .ico{transform:translateX(-5px)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:var(--deep);box-shadow:0 10px 15px rgba(197,165,255,.18)}
.btn--primary:hover{background:#d3baff;box-shadow:0 14px 28px rgba(197,165,255,.3);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.24)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.btn--light{background:#fffdf9;color:var(--deep)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.25)}
.btn:disabled{opacity:.7;cursor:progress}
.chip{display:inline-block;font-size:11px;color:var(--soft);background:rgba(197,165,255,.1);border:1px solid rgba(197,165,255,.18);border-radius:999px;padding:4px 14px}

/* header */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(#2c1347,rgba(44,19,71,.9));transition:box-shadow .3s,background .3s}
.header.is-stuck{background:rgba(36,16,57,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:102px;border-bottom:1px solid rgba(197,165,255,.12);padding-inline:0;margin-inline:var(--pad);width:auto;max-width:none}
@media(min-width:1640px){.header__in{margin-inline:auto;max-width:1240px}}
.logo{display:flex;align-items:center;gap:14px}
.logo__mark{width:40px;height:40px;background:var(--brand);border-radius:50% 50% 50% 8px;display:grid;place-items:center;transition:transform .5s var(--ease)}
.logo:hover .logo__mark{transform:rotate(-10deg) scale(1.06)}
.logo__mark i{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1;color:#fff}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__txt b{font-size:19px;letter-spacing:.2em;font-weight:700}
.logo__txt small{font-size:8px;letter-spacing:.22em;color:var(--soft);margin-top:6px}
.nav{display:flex;align-items:center;gap:44px;font-size:15px}
.nav a:not(.btn){position:relative;padding:6px 0;opacity:.92}
.nav a:not(.btn)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav__cta{display:none}
.header__cta{min-height:52px;padding:0 28px;gap:0;order:3}
.nav{order:2}
.logo{order:1}
.burger{display:none}

/* hero */
.hero{position:relative;min-height:min(830px,100svh - 102px);background:
  radial-gradient(ellipse 22% 36% at 74% 28%,rgba(109,53,168,.38),transparent),
  radial-gradient(ellipse 18% 32% at 8% 73%,rgba(75,22,128,.38),transparent),
  linear-gradient(158deg,var(--bg1) 6%,var(--bg2) 50%,var(--bg3) 94%);overflow:hidden;display:flex;align-items:center}
.hero__ghost{position:absolute;inset-inline-start:-14px;bottom:-60px;font-size:clamp(120px,17.7vw,255px);line-height:1;font-weight:800;letter-spacing:-.08em;color:rgba(197,165,255,.04);direction:ltr;white-space:nowrap;pointer-events:none;user-select:none}
.hero__line{position:absolute;inset-block:0;inset-inline-start:50%;width:1px;background:rgba(255,255,255,.06)}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:40px;padding-block:70px}
.hero__text{display:flex;flex-direction:column;align-items:flex-start;max-width:640px}
.hero__text .h1{white-space:nowrap}
.hero__text .h1{margin-top:23px}
.hero__text .lead{margin-top:27px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
.hero__note{display:flex;align-items:center;gap:17px;margin-top:47px;font-size:12px;line-height:1.55;color:var(--soft)}
.hero__note span{width:58px;height:1px;background:rgba(255,255,255,.2)}
.scroll{position:absolute;bottom:42px;inset-inline-end:10px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.07em;color:var(--soft);writing-mode:vertical-rl;opacity:.9}
.scroll i{width:1px;height:42px;background:var(--soft);transform-origin:top;animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero mockup */
.mock{position:relative;width:641px;height:570px;justify-self:start;margin-inline-start:0;zoom:1}
.mock__ring{position:absolute;border-radius:50%;border:1px solid rgba(197,165,255,.2)}
.mock__ring--1{inset-inline-start:16px;top:30px;width:520px;height:520px;animation:spin 60s linear infinite}
.mock__ring--2{inset-inline-start:66px;top:80px;width:420px;height:420px;border-style:dashed;animation:spin 80s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.browser{position:absolute;inset-inline-start:23px;top:42px;width:510px;height:450px;background:#fffdf9;border:5px solid #1c1720;border-radius:16px;overflow:hidden;transform:rotate(-2.5deg);box-shadow:0 30px 80px rgba(10,2,20,.45);animation:bob 7s ease-in-out infinite;direction:ltr}
@keyframes bob{50%{transform:rotate(-2deg) translateY(-10px)}}
.browser__bar{height:32px;background:#f7f4f7;border-bottom:1px solid #e4dee5;display:flex;align-items:center;gap:13px;padding:0 12px}
.browser__bar i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c9c2cb;margin-inline-end:-9px}
.browser__bar span{margin-inline:auto;width:276px;height:15px;border-radius:6px;background:rgba(255,255,255,.56);text-align:center;font-size:5px;line-height:15px;letter-spacing:.4px;color:#afa6b0}
.browser__bar span{margin-inline-start:13px}
.browser__body{position:relative;height:408px;background:#e6d9d0;overflow:hidden;direction:rtl}
.b-nav{position:absolute;inset-inline:28px;top:21px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#fff}
.b-nav s{display:none}
.b-arch{position:absolute;left:266px;top:78px;width:210px;height:330px;background:#be8b76;border-radius:110px 110px 0 0;overflow:hidden}
.b-sun{position:absolute;left:52px;top:48px;width:105px;height:105px;border-radius:50%;background:#dfb061}
.b-house{position:absolute;left:22px;top:115px;width:165px;height:215px;background:#c6b3a8}
.b-house u{position:absolute;top:85px;width:25px;height:48px;background:#806c68}
.b-house u:nth-child(1){left:130px}.b-house u:nth-child(2){left:85px}.b-house u:nth-child(3){left:40px}
.b-copy{position:absolute;left:232px;top:104px;width:240px;height:165px}
.b-copy small{position:absolute;right:0;top:10px;font-size:6px;letter-spacing:1px;color:#7b625a}
.b-copy b{position:absolute;right:50px;top:34px;font-size:29px;line-height:1.15;font-weight:500;color:#fff;text-align:right;white-space:nowrap}
.b-copy s{position:absolute;height:3px;border-radius:4px;background:rgba(28,23,32,.17);left:0}
.b-copy s:nth-of-type(1){top:111px;width:192px}.b-copy s:nth-of-type(2){top:119px;width:149px}
.b-copy span{position:absolute;left:0;top:150px;font-size:7px;font-weight:700;color:#fff;border-bottom:1px solid #fff;padding-bottom:2px}
.pill{white-space:nowrap;position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:11px;background:rgba(42,16,64,.9);border:1px solid rgba(197,165,255,.18);box-shadow:0 10px 30px rgba(10,2,20,.3);backdrop-filter:blur(6px)}
.pill--a{inset-inline-start:481px;left:auto;top:18px;animation:float 6s ease-in-out infinite}
.pill--b{inset-inline-start:0;top:475px;animation:float 7s ease-in-out -2s infinite}
.pill .ico{color:var(--accent)}
.pill__n{width:25px;height:25px;border-radius:50%;background:var(--accent);color:var(--deep);display:grid;place-items:center;font-size:8px}
@keyframes float{50%{transform:translateY(-8px)}}
.cursor-tag{position:absolute;left:587px;top:463px;background:var(--brand);color:#fff;font-size:8px;padding:3px 7px;border-radius:3px;transform:rotate(15deg);animation:float 5s ease-in-out -1s infinite}

/* sections */
.sec{padding-block:130px;position:relative}
#services{background:linear-gradient(160deg,#27103f,#21102f 50%,#25103f)}
#work{background:#21102f}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:70px}
.sec__aside{max-width:380px;color:var(--soft);line-height:1.95;padding-bottom:8px}
.sec__head--center{flex-direction:column;align-items:center;text-align:center;gap:0;margin-bottom:80px}
.sec__sub{margin-top:24px;color:var(--soft)}
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal]:not(.in){opacity:0;transform:translateY(28px)}

/* services */
.services{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:130px 1fr auto auto;align-items:center;gap:32px;padding:38px 0;border-bottom:1px solid var(--line);position:relative;transition:background .4s}
.svc::before{content:"";position:absolute;inset:0 -24px;background:linear-gradient(90deg,transparent,rgba(197,165,255,.05),transparent);opacity:0;transition:opacity .4s;pointer-events:none;border-radius:16px}
.svc:hover::before{opacity:1}
.svc__num{position:absolute;inset-inline-start:0;top:20px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent);opacity:.8}
.svc__icon{width:62px;height:62px;border-radius:50%;background:rgba(197,165,255,.1);display:grid;place-items:center;margin-inline-start:50px;color:var(--accent);transition:background .4s,color .4s,transform .5s var(--ease)}
.svc__icon .ico{width:24px;height:24px}
.svc:hover .svc__icon{background:var(--accent);color:var(--deep);transform:rotate(-8deg) scale(1.06)}
.svc__body{max-width:430px}
.svc h3{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.svc__body p{margin-top:12px;color:var(--soft);font-size:15px;line-height:1.8}
.tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tags li{font-size:12px;color:var(--soft);border:1px solid rgba(197,165,255,.2);border-radius:999px;padding:8px 16px;transition:border-color .3s}
.svc:hover .tags li{border-color:rgba(197,165,255,.45)}
.svc__go{width:45px;height:45px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--ease)}
.svc__go:hover{background:var(--accent);color:var(--deep);transform:translateX(-4px)}

/* work */
.work{display:flex;flex-direction:column;gap:110px}
.proj{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.proj:nth-child(odd) .proj__media{order:2}
.proj__media{display:block;aspect-ratio:1.5/1;border-radius:28px;overflow:hidden;position:relative;border:1px solid rgba(197,165,255,.15);transition:transform .7s var(--ease),box-shadow .7s}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.proj__media:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,2,20,.45)}
.proj__media:hover img,.proj__media:hover .art{transform:scale(1.04)}
.proj__media--studio{background:radial-gradient(circle at 25% 15%,#b08cc0,#7e5191 50%,#583669)}
.proj__media--mellow{background:radial-gradient(circle at 80% 10%,#6a2aa6,#4a1a82 60%,#3a1368)}
.proj__info{position:relative;padding-inline-end:36px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.proj__info::after{content:"";position:absolute;inset-inline-end:0;top:-10%;bottom:-10%;width:1px;background:var(--line)}
.proj__n{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:15px}
.proj h3{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.proj__info>p{color:var(--soft);font-size:14px;line-height:1.8}
.proj__tags{font-size:12px!important;opacity:.85}
.link{display:inline-flex;align-items:center;gap:12px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:6px;margin-top:14px;transition:gap .3s,border-color .3s}
.link:hover{gap:20px;border-color:var(--accent)}
.work__more{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:90px;font-size:13px;color:var(--soft);flex-wrap:wrap;text-align:center}

/* illustrated placeholders (CSS only, shown only until real screenshots exist) */
.art{position:absolute;inset:12% 7% 12% 9%;background:#f4efe8;border-radius:12px;overflow:hidden;transform:rotate(-1.5deg);transition:transform .9s var(--ease);box-shadow:0 30px 60px rgba(10,2,20,.35);direction:ltr;color:#1c1720}
.art .b-bar{height:7%;min-height:14px;background:#f7f4f7;display:flex;align-items:center;gap:4px;padding:0 10px;border-bottom:1px solid #e4dee5}
.art .b-bar i{width:5px;height:5px;border-radius:50%;background:#c9c2cb}
.a-body{position:absolute;inset:7% 0 0}
.a-brand{position:absolute;top:8%;left:6%;font-size:clamp(8px,.9vw,12px);font-weight:800}
.a-title{position:absolute;left:6%;font-weight:800;letter-spacing:-.04em;line-height:.95;font-size:clamp(20px,3.1vw,44px)}
.art--studio .a-title{top:24%;left:24%}
.art--studio .a-title i{font-family:var(--serif);color:#c04a2a}
.a-blocks{position:absolute;inset:55% 4% 0 20%;display:flex;gap:10px}
.a-blocks span{flex:1;background:#3a332f}.a-blocks span+span{background:#b9afa5}
.a-blocks span:first-child::after{content:"";display:block;width:34%;aspect-ratio:1;border-radius:50%;background:#c4502e;margin:12% auto 0}
.a-phone{position:absolute;left:3%;top:34%;width:19%;aspect-ratio:.5;background:#f4efe8;border:4px solid #1c1720;border-radius:14px;padding:12% 8%;font-size:clamp(7px,1vw,13px);font-weight:800;line-height:1;box-shadow:0 10px 20px rgba(0,0,0,.3)}
.a-phone i{font-family:var(--serif);color:#c04a2a}
.art--mellow{background:#f3e5cf;inset:12% 6% 10% 6%;transform:rotate(1.2deg)}
.art--mellow .b-bar{background:#241039;border:0}
.art--mellow .a-brand{font-weight:600;font-size:clamp(9px,1vw,13px)}
.a-arch{position:absolute;left:6%;top:12%;width:42%;height:95%;background:#d6a4dc;border-radius:999px 999px 0 0}
.a-bottle{position:absolute;left:16%;top:28%;width:16%;height:62%;background:#5d3a78;border-radius:10px 10px 14px 14px}
.a-bottle::before{content:"";position:absolute;top:-9%;left:55%;width:40%;height:11%;background:#2a1636}
.art--mellow .a-title{left:auto;right:6%;top:30%;text-align:right;direction:rtl;font-size:clamp(14px,2.2vw,32px);color:#3a1e4d}
.a-btn{position:absolute;right:6%;bottom:18%;font-size:clamp(7px,.8vw,10px);background:#5d3a78;color:#fff;padding:5px 12px;border-radius:99px}

/* about */
.about{background:linear-gradient(180deg,#26103c,#26103c)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about__text{max-width:540px}
.about .h2{font-size:clamp(40px,4.4vw,62px)}
.quote{margin:36px 0 26px;padding-inline-end:22px;border-inline-end:2px solid var(--accent);font-size:20px;line-height:1.75}
.body{color:var(--soft);line-height:2;font-size:15px}
.checks{display:flex;flex-wrap:wrap;gap:12px 24px;margin:30px 0 36px;font-size:13px;color:var(--soft)}
.checks li{display:flex;align-items:center;gap:8px}
.checks .ico{width:14px;height:14px;color:var(--accent)}
.poster-wrap{position:relative;height:560px;max-width:520px;justify-self:end;width:100%}
.poster-wrap::before{content:"";position:absolute;inset:3% -4% 0 6%;border-radius:200px 200px 0 0;background:rgba(255,255,255,.05)}
.poster__back{position:absolute;inset:30px 0 -10px 16px;background:rgba(255,255,255,.12);border-radius:20px;transform:rotate(2deg)}
.poster{position:absolute;inset:20px 20px 0 12px;background:radial-gradient(circle at 80% 22%,#7d3aa8 0,#531c86 30%,#3b1366 70%);border-radius:6px;overflow:hidden;transform:rotate(1.2deg);box-shadow:0 30px 70px rgba(10,2,20,.4);transition:transform .8s var(--ease);direction:ltr}
.poster-wrap:hover .poster{transform:rotate(0) translateY(-6px)}
.poster__n{position:absolute;right:28px;top:14px;font-family:var(--serif);font-size:120px;line-height:1;color:#fff}
.poster__lines{position:absolute;inset:auto 0 0 0;width:100%;height:60%;fill:none;stroke:rgba(255,255,255,.4);stroke-width:1}
.poster__t{position:absolute;left:22px;bottom:30px;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#fff;transform:rotate(-3deg);transform-origin:left}
.seal{position:absolute;left:-6px;top:-8px;width:82px;height:82px;border-radius:50%;background:#f7f0ff;color:var(--brand);display:grid;place-items:center;font-size:9px;letter-spacing:.25em;animation:spin 24s linear infinite;direction:ltr;z-index:2}
.note{position:absolute;right:-4px;bottom:8px;background:#f7f0ff;color:var(--deep);font-size:12.5px;line-height:1.5;padding:14px 18px;border-radius:10px;box-shadow:0 18px 40px rgba(10,2,20,.35);z-index:2;animation:float 7s ease-in-out infinite}

/* process */
.process{background:radial-gradient(ellipse 40% 30% at 50% 100%,rgba(109,53,168,.3),transparent),#20102f;padding-block:120px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;text-align:center}
.steps::before{content:"";position:absolute;top:34px;inset-inline:16.66%;height:1px;background:rgba(197,165,255,.2);transform:scaleX(0);transform-origin:right;transition:transform 1.6s var(--ease) .2s}
.steps:has(.in)::before{transform:scaleX(1)}
.steps li{position:relative}
.step__n{position:relative;width:70px;height:70px;border-radius:50%;margin:0 auto 34px;display:grid;place-items:center;font-family:var(--serif);font-style:italic;color:var(--accent);background:#341a50;border:9px solid #20102f;outline:1px solid rgba(197,165,255,.25);outline-offset:-1px;transition:background .5s,color .5s}
.steps li.in .step__n{background:#3f2062}
.steps li:hover .step__n{background:var(--accent);color:var(--deep)}
.steps h3{font-size:25px;font-weight:600;margin-bottom:14px}
.steps p{color:var(--soft);font-size:14px;line-height:1.85;max-width:300px;margin-inline:auto}

/* contact */
.contact{background:radial-gradient(ellipse 50% 60% at 70% 0,rgba(109,53,168,.55),transparent),linear-gradient(160deg,#3a1560,#2a1044 60%,#220e38);overflow:hidden;padding-block:130px}
.contact__ghost{position:absolute;inset-inline-end:2%;top:-8%;font-family:var(--serif);font-style:italic;font-size:clamp(300px,48vw,700px);line-height:1;color:rgba(197,165,255,.06);pointer-events:none}
.contact__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;position:relative}
.contact__text{max-width:520px}
.contact__text .h2{margin-bottom:28px}
.contact__text .lead{font-size:17px;max-width:460px}
.contact .actions{gap:24px}
.mail{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--soft);transition:color .3s}
.mail:hover{color:#fff}
.form{background:rgba(24,8,38,.55);border:1px solid rgba(197,165,255,.2);border-radius:32px;padding:34px 34px 30px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:22px}
.form__head small{display:block;font-size:11px;color:var(--soft);margin-bottom:6px}
.form__head h3{font-size:24px;font-weight:600}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:9px;font-size:13px}
.field b{color:var(--accent)}
.field small{font-size:10px;opacity:.7;margin-inline-start:6px}
.field input,.field select,.field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(197,165,255,.25);border-radius:14px;padding:14px 16px;font-size:14px;transition:border-color .3s,background .3s,box-shadow .3s;width:100%}
.field input::placeholder,.field textarea::placeholder{color:rgba(213,200,229,.5)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(197,165,255,.15)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d5c8e5' stroke-width='1.6'><path d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:left 16px center;cursor:pointer}
.field select option{background:#2a1044;color:#fff}
.field textarea{resize:vertical;min-height:110px}
.field.has-error input,.field.has-error select{border-color:#ff8aa0;background:rgba(255,138,160,.08)}
.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form__foot small{font-size:10px;color:var(--soft);opacity:.7}
.form__status{font-size:13px;line-height:1.7;padding:12px 16px;border-radius:12px;border:1px solid}
.form__status[data-kind=error]{color:#ffb4c2;border-color:rgba(255,138,160,.4);background:rgba(255,138,160,.08)}
.form__status[data-kind=success]{color:#b9f0cf;border-color:rgba(120,230,170,.4);background:rgba(120,230,170,.08)}
.form__status[data-kind=info]{color:var(--soft);border-color:rgba(197,165,255,.3);background:rgba(197,165,255,.08)}
.form.is-loading{opacity:.85}

/* footer */
.footer{background:var(--foot);padding-top:76px}
.footer__grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:60px;align-items:start;padding-bottom:70px}
.fcol{display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--soft)}
.fcol h4{font-size:13px;color:#fff;margin-bottom:6px;font-weight:700}
.fcol a{transition:color .3s}.fcol a:hover{color:#fff}
.footer__claim{font-size:24px;line-height:1.5;color:var(--soft);justify-self:end}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-block:28px;font-size:11px;color:rgba(213,200,229,.6)}
.footer__base{max-width:1440px}

/* floating whatsapp (mobile) */
.wa-float{display:none;position:fixed;inset-inline-start:16px;bottom:16px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:40}
.wa-float .ico{width:28px;height:28px}

/* tablet */
@media(max-width:1100px){
  .nav{gap:26px}
  .hero__grid{grid-template-columns:1fr;justify-items:center;text-align:start}
  .hero__line,.scroll{display:none}
  .hero__text{max-width:640px;width:100%}
  .hero__text .h1{white-space:normal}
  .mock{zoom:.9;justify-self:center}
  .svc{grid-template-columns:90px 1fr auto;row-gap:18px}
  .svc .tags{grid-column:2;grid-row:2;justify-content:flex-start}
  .svc__go{grid-column:3;grid-row:1}
  .svc__icon{margin-inline-start:30px;width:56px;height:56px}
  .proj{gap:44px}
  .about__grid,.contact__grid{gap:48px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer__claim{justify-self:start}
}
/* mobile */
@media(max-width:820px){
  .header__in{height:76px}
  .header__cta{display:none}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);align-items:center;cursor:pointer;order:3;z-index:60}
  .burger span{width:18px;height:1.5px;background:#fff;transition:transform .35s var(--ease)}
  .menu-open .burger span:first-child{transform:translateY(4.2px) rotate(45deg)}
  .menu-open .burger span:last-child{transform:translateY(-4.2px) rotate(-45deg)}
  .nav{position:fixed;inset:0;background:linear-gradient(160deg,#2c1347,#1d0b30);flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:100px var(--pad) 40px;font-size:34px;font-weight:600;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s,transform .45s var(--ease),visibility .35s;z-index:55}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .nav a:not(.btn){padding:10px 0}
  .nav__cta{display:inline-flex;margin-top:28px;font-size:15px}
  .logo{z-index:60}
  .menu-open{overflow:hidden}
  .hero__grid{padding-block:40px 70px}
  .hero__ghost{bottom:-20px}
  .mock{zoom:.58;margin-block:-60px -40px}
  .hero__text{order:1}.mock{order:2}
  .hero__text .btn{flex:1 1 auto}
  .sec{padding-block:80px}
  .sec__head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:44px}
  .svc{grid-template-columns:60px 1fr 44px;gap:14px 16px;padding:30px 0}
  .svc__icon{margin:0;width:48px;height:48px;grid-row:1}
  .svc__num{display:none}
  .svc h3{font-size:24px}
  .svc .tags{grid-column:1/-1}
  .work{gap:70px}
  .proj{grid-template-columns:1fr;gap:26px}
  .proj:nth-child(odd) .proj__media{order:0}
  .proj__info{padding-inline-end:0}.proj__info::after{display:none}
  .proj h3{font-size:30px}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .poster-wrap{height:460px;max-width:420px;justify-self:center;margin-top:20px}
  .poster__n{font-size:90px}.poster__t{font-size:24px}
  .steps{grid-template-columns:1fr;gap:44px;text-align:start}
  .steps::before{inset:35px 35px 35px auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .steps:has(.in)::before{transform:scaleY(1)}
  .steps li{padding-inline-start:96px}
  .step__n{position:absolute;inset-inline-start:0;top:0;margin:0}
  .steps p{margin:0}
  .contact{padding-block:80px}
  .form{padding:26px 20px;border-radius:26px}
  .row{grid-template-columns:1fr}
  .form__foot .btn{width:100%}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer__grid .logo{grid-column:1/-1}
  .wa-float{display:grid}
  .footer__base{padding-bottom:90px}
}
@media(max-width:420px){.mock{zoom:.5;margin-block:-80px -60px}.h1{font-size:38px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]:not(.in){opacity:1;transform:none}
}