:root{
  --bg:#ffffff;
  --text:#0a1020;
  --muted:#687186;
  --line:#e8ebf1;
  --soft:#f6f8fb;
  --dark:#070b12;
  --dark2:#0c1420;
  --blue:#1677ff;
  --blue2:#3e8dff;
  --cyan:#7cc7ff;
  --green:#22c87a;
  --shadow:0 20px 60px rgba(20,35,70,.12);
  --radius:24px;
  --radius-sm:16px;
  --container:min(1180px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:var(--container);margin:0 auto}
.section{padding:94px 0}
.section-soft{background:var(--soft)}
.section-dark{background:linear-gradient(135deg,#060910 0%,#0a1423 55%,#090c14 100%);color:#fff;position:relative;overflow:hidden}
.kicker{display:inline-block;font-size:.74rem;letter-spacing:.16em;font-weight:800;color:var(--blue);margin-bottom:10px}
.kicker-light{color:#8ebdff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);font-size:.8rem;font-weight:700;color:#dce8ff;margin-bottom:20px}
.spark{color:#6cb1ff}
.site-header{height:74px;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(10,16,32,.08)}
.brand{display:flex;align-items:center;gap:10px;font-size:1rem;white-space:nowrap}
.brand img{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#050505}
.brand strong{font-size:1.35rem;letter-spacing:-.04em}
.nav{display:flex;gap:28px;align-items:center;margin-left:auto}
.nav a{font-size:.92rem;color:#3e4657;position:relative}
.nav a:hover,.nav a.active{color:var(--text)}
.nav a:after{content:"";height:2px;left:0;right:100%;bottom:-10px;position:absolute;background:var(--blue);transition:.25s}
.nav a:hover:after,.nav a.active:after{right:0}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid transparent;font-weight:750;transition:.2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.9rem}
.btn-primary{background:linear-gradient(135deg,var(--blue),#3d7eff);color:#fff;box-shadow:0 12px 30px rgba(22,119,255,.25)}
.btn-primary:hover{box-shadow:0 16px 36px rgba(22,119,255,.34)}
.btn-ghost{border-color:#dfe4ec;background:transparent;color:inherit}
.section-dark .btn-ghost,.contact-card .btn-ghost{border-color:rgba(255,255,255,.2);color:#fff}
.btn-whatsapp{background:linear-gradient(135deg,#1cbf6b,#26d985);color:#062212;box-shadow:0 12px 30px rgba(34,200,122,.22)}

.hero{padding:96px 0 78px;min-height:650px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:66px;align-items:center;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(3rem,6vw,5.7rem);line-height:.93;letter-spacing:-.065em;margin:0 0 24px;max-width:760px}
.hero-copy h1 span{color:#68aaff}
.hero-copy p{font-size:1.16rem;color:#aeb9ca;max-width:660px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-points{display:flex;flex-wrap:wrap;gap:18px;color:#9ba8bc;font-size:.86rem}
.hero-showcase{position:relative;min-height:480px}
.browser-frame{position:absolute;inset:42px 0 34px 0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);transform:rotate(1deg)}
.browser-top{height:34px;background:#eceff4;display:flex;align-items:center;padding:0 12px;gap:6px;color:#7f8795;font-size:.68rem}
.browser-top i{width:8px;height:8px;border-radius:50%;background:#b6bcc7}
.browser-top span{margin-left:10px;background:#fff;border-radius:7px;padding:4px 10px;min-width:170px;text-align:center}
.browser-frame img{width:100%;height:calc(100% - 34px);object-fit:cover;object-position:top left}
.phone-frame{background:#05080d;border:7px solid #141922;border-radius:34px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;position:relative}
.phone-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-notch{position:absolute;z-index:2;top:7px;left:50%;transform:translateX(-50%);width:34%;height:8px;border-radius:20px;background:#05080d}
.phone-floating{position:absolute;width:172px;height:365px;right:-18px;bottom:-10px;transform:rotate(-4deg);z-index:3}
.showcase-note{position:absolute;left:-10px;bottom:5px;z-index:4;background:rgba(8,13,23,.88);border:1px solid rgba(255,255,255,.13);padding:11px 14px;border-radius:14px;color:#cbd5e6;font-size:.77rem;backdrop-filter:blur(10px)}
.showcase-note strong{color:#fff}
.hero-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.35}
.hero-glow-a{width:480px;height:480px;background:#0c64ff;right:15%;top:-260px}
.hero-glow-b{width:420px;height:420px;background:#1d5f8d;left:-250px;bottom:-280px}

.quick-strip{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(20,35,70,.04)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:23px 0}
.quick-grid>div{display:flex;align-items:center;gap:14px;padding:6px 24px;border-right:1px solid var(--line)}
.quick-grid>div:last-child{border:0}
.quick-grid b{width:42px;height:42px;border-radius:13px;background:#eef5ff;color:var(--blue);display:grid;place-items:center;font-size:1.1rem}
.quick-grid span{display:flex;flex-direction:column;color:#7b8495;font-size:.76rem}
.quick-grid strong{color:var(--text);font-size:.92rem;margin-bottom:2px}

.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}
.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em;line-height:1.05;margin:0}
.section-heading p{max-width:460px;margin:0;color:var(--muted)}
.text-link{font-size:.9rem;color:var(--blue);font-weight:750;white-space:nowrap}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;min-height:205px;box-shadow:0 9px 30px rgba(20,35,70,.04);transition:.2s}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#edf5ff;color:var(--blue);font-size:1.25rem;margin-bottom:22px}
.service-card h3{margin:0 0 8px;font-size:1.08rem}
.service-card p{margin:0;color:var(--muted);font-size:.93rem}

.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.project-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 16px 45px rgba(20,35,70,.08);transition:.25s;cursor:pointer}
.project-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(20,35,70,.13)}
.project-cover{aspect-ratio:16/9;background:#0c111b;overflow:hidden}
.project-cover img{width:100%;height:100%;object-fit:cover;object-position:top;transition:.35s}
.project-card:hover .project-cover img{transform:scale(1.02)}
.project-body{padding:22px}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.project-meta span{font-size:.72rem;font-weight:800;color:var(--blue);letter-spacing:.08em;text-transform:uppercase}
.project-meta small{color:#9aa1ae}
.project-body h3{font-size:1.35rem;margin:0 0 8px}
.project-body p{margin:0 0 16px;color:var(--muted);font-size:.92rem}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{font-size:.73rem;padding:6px 9px;background:#f0f4f9;border-radius:999px;color:#526074}
.project-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.project-footer a{font-weight:750;font-size:.86rem;color:var(--blue)}
.project-footer button{border:0;background:none;color:#6b7587;font-weight:700;font-size:.84rem;padding:0}

.admin-feature{padding:88px 0}
.admin-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.admin-copy h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1;letter-spacing:-.05em;margin:0 0 20px}
.admin-copy p{color:#a9b4c4;max-width:620px}
.check-list{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;color:#dbe4f1;font-size:.9rem}
.admin-phones{height:510px;position:relative}
.admin-phone{position:absolute;width:235px;height:495px}
.admin-phone.one{left:10%;top:0;transform:rotate(-5deg)}
.admin-phone.two{right:12%;top:15px;transform:rotate(5deg)}
.admin-phone img{object-fit:cover;object-position:top}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.process-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;min-height:185px}
.process-step>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-weight:900;margin-bottom:20px}
.process-step h3{margin:0 0 8px;font-size:1.05rem}
.process-step p{margin:0;color:var(--muted);font-size:.9rem}
.featured-step{border-color:#a9cdfd;background:linear-gradient(180deg,#fff,#f3f8ff)}

.concept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.concept-card{border-radius:22px;overflow:hidden;position:relative;background:#0a0d13;aspect-ratio:16/9;box-shadow:0 16px 45px rgba(20,35,70,.1)}
.concept-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.concept-overlay{position:absolute;inset:auto 0 0;padding:38px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}
.concept-overlay small{display:block;font-size:.69rem;letter-spacing:.12em;color:#b8c9df;text-transform:uppercase;margin-bottom:4px}
.concept-overlay strong{font-size:1rem}
.concept-badge{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em}

.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq-intro h2{font-size:clamp(2.2rem,4vw,3.7rem);line-height:1;letter-spacing:-.05em;margin:0 0 18px}
.faq-intro p{color:var(--muted)}
.faq-list{border-top:1px solid #dce1e9}
.faq-list details{border-bottom:1px solid #dce1e9;padding:20px 0}
.faq-list summary{font-weight:750;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.faq-list summary:after{content:"+";position:absolute;right:0;font-size:1.3rem;color:var(--blue)}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{color:var(--muted);margin:12px 0 0;max-width:700px}

.contact-section{padding:72px 0;background:#fff}
.contact-card{background:radial-gradient(circle at 82% 0,#17345f 0,transparent 36%),linear-gradient(135deg,#070b12,#0c1523);color:#fff;border-radius:30px;padding:42px;display:grid;grid-template-columns:1.2fr .8fr;gap:34px;position:relative;overflow:hidden}
.contact-card h2{font-size:clamp(2.1rem,4vw,3.7rem);line-height:1;letter-spacing:-.05em;margin:0 0 14px}
.contact-card p{margin:0;color:#aeb9c9;max-width:600px}
.contact-actions{display:flex;flex-direction:column;gap:10px;justify-content:center}
.contact-location{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;color:#aeb9c9;font-size:.9rem}

.footer{background:#060910;color:#bac4d2;padding:40px 0 22px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:30px}
.footer-brand span{display:flex;flex-direction:column;color:#fff}.footer-brand small{color:#7d8899;font-size:.72rem;font-weight:400}
.footer-links,.footer-social{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:28px;display:flex;justify-content:space-between;gap:20px;font-size:.76rem;color:#747f90}

.project-dialog{width:min(1060px,calc(100% - 28px));max-height:90vh;border:0;border-radius:24px;padding:0;background:#fff;box-shadow:0 30px 100px rgba(0,0,0,.4);overflow:auto}
.project-dialog::backdrop{background:rgba(4,8,15,.75);backdrop-filter:blur(7px)}
.dialog-close{position:sticky;float:right;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid #e0e5ed;background:rgba(255,255,255,.93);font-size:1.5rem;display:grid;place-items:center}
.dialog-project-head{padding:38px 38px 20px}
.dialog-project-head h2{font-size:2rem;margin:0 0 8px;letter-spacing:-.04em}.dialog-project-head p{margin:0;color:var(--muted)}
.dialog-gallery{padding:0 38px 38px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.dialog-shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#080c13}.dialog-shot img{width:100%;height:100%;max-height:630px;object-fit:contain;object-position:top;background:#080c13}
.dialog-shot.mobile{max-width:310px;justify-self:center}
.dialog-project-actions{padding:0 38px 38px;display:flex;gap:12px;flex-wrap:wrap}

.portfolio-hero{padding:100px 0 70px}.portfolio-hero h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.9;letter-spacing:-.07em;margin:12px 0 22px;max-width:900px}.portfolio-hero p{color:#aeb9c9;font-size:1.15rem;max-width:720px}

.admin-page{background:#f4f6f9;min-height:100vh}.admin-header{height:76px;padding:0 max(24px,calc((100% - 1080px)/2));display:flex;align-items:center;justify-content:space-between;background:#080b12;color:#fff}.admin-shell{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:54px 0 90px}.admin-title{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.admin-title h1{font-size:3.2rem;letter-spacing:-.05em;margin:0}.admin-title p{margin:5px 0 0;color:var(--muted)}.backend-notice{padding:16px 18px;border:1px solid #b8d4fb;background:#edf5ff;border-radius:16px;color:#284e7e;margin-bottom:24px;font-size:.9rem}.admin-project-list{display:grid;gap:12px}.admin-project-row{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.admin-project-row img{width:110px;height:70px;object-fit:cover;border-radius:12px}.admin-project-row h3{margin:0 0 3px}.admin-project-row p{margin:0;color:var(--muted);font-size:.83rem}.admin-row-actions{display:flex;gap:8px}.mini-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;font-weight:700;font-size:.78rem}.mini-btn.danger{color:#c43535}.admin-dialog{width:min(760px,calc(100% - 28px));max-height:90vh;border:0;border-radius:24px;padding:0;overflow:auto}.admin-dialog::backdrop{background:rgba(3,6,12,.7);backdrop-filter:blur(7px)}.admin-dialog form{padding:28px}.admin-dialog-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:18px}.admin-dialog-head h2{margin:0;font-size:2rem}.admin-dialog .dialog-close{position:static;float:none}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:750;color:#3c4656}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid textarea,.form-grid select{width:100%;border:1px solid #dfe4ec;background:#fff;border-radius:12px;padding:12px 13px;color:#111827;outline:none}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:#8ab8f8;box-shadow:0 0 0 4px #eaf3ff}.check-field{flex-direction:row!important;align-items:center;background:#f6f8fb;padding:12px;border-radius:12px}.check-field input{width:auto!important}.upload-field{padding:14px;border:1px dashed #cbd4df;border-radius:14px;background:#fbfcfe}.upload-field small{font-weight:500;color:#778194}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.local-thumb{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}.local-thumb img{width:92px;height:62px;object-fit:cover;border-radius:10px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}.reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .site-header{padding:0 20px}.nav{position:absolute;top:74px;left:0;right:0;background:#fff;display:none;flex-direction:column;align-items:flex-start;padding:22px;border-bottom:1px solid var(--line);gap:18px}.nav.open{display:flex}.menu-toggle{display:block;margin-left:auto}.header-cta{display:none}
  .hero{padding:70px 0}.hero-grid,.admin-grid,.faq-wrap{grid-template-columns:1fr}.hero-showcase{min-height:450px}.hero-copy h1{max-width:760px}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-grid>div:nth-child(2){border-right:0}.quick-grid>div{border-bottom:1px solid var(--line)}.quick-grid>div:nth-child(3),.quick-grid>div:nth-child(4){border-bottom:0}
  .service-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.admin-phones{height:500px}.section-heading{align-items:start}.contact-card{grid-template-columns:1fr}.contact-location{grid-column:auto}.footer-grid{grid-template-columns:1fr}.concept-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  :root{--container:min(100% - 28px,1180px)}.section{padding:68px 0}.site-header{height:68px}.nav{top:68px}.brand img{width:40px;height:40px}.brand span{font-size:.9rem}.brand strong{font-size:1.15rem}
  .hero{padding:58px 0 50px;min-height:auto}.hero-grid{gap:40px}.hero-copy h1{font-size:3.15rem}.hero-copy p{font-size:1rem}.hero-points{display:grid;gap:8px}.hero-showcase{min-height:365px}.browser-frame{inset:20px 18px 35px 0}.phone-floating{width:125px;height:270px;right:0;bottom:-6px}.showcase-note{display:none}
  .quick-grid{grid-template-columns:1fr 1fr}.quick-grid>div{padding:10px}.quick-grid b{width:36px;height:36px}.quick-grid strong{font-size:.82rem}.quick-grid span{font-size:.67rem}
  .section-heading{display:block}.section-heading p,.section-heading .text-link{display:block;margin-top:14px}.service-grid,.projects-grid,.process-grid{grid-template-columns:1fr}.service-card{min-height:0}.project-card{border-radius:20px}.project-body{padding:18px}
  .admin-feature{padding:70px 0}.admin-phones{height:420px}.admin-phone{width:190px;height:405px}.admin-phone.one{left:0}.admin-phone.two{right:0}.check-list{grid-template-columns:1fr}
  .contact-card{padding:28px;border-radius:24px}.contact-actions .btn{width:100%}.footer-bottom{flex-direction:column}
  .dialog-project-head{padding:30px 20px 14px}.dialog-gallery{padding:0 20px 24px;grid-template-columns:1fr}.dialog-project-actions{padding:0 20px 30px}.dialog-shot.mobile{max-width:260px}
  .portfolio-hero{padding:72px 0 48px}.portfolio-hero h1{font-size:3.5rem}
  .admin-shell{padding:34px 0 70px}.admin-title{display:block}.admin-title .btn{margin-top:18px}.admin-project-row{grid-template-columns:78px 1fr}.admin-project-row img{width:78px;height:58px}.admin-row-actions{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.admin-dialog form{padding:20px}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}
}
.admin-login{min-height:70vh;display:grid;place-items:center;padding:36px 0}.login-card{width:min(520px,100%);background:#0d1320;border:1px solid #25314a;border-radius:24px;padding:30px;color:#fff}.login-card h1{font-size:34px;margin:8px 0}.login-card p{color:#aeb8ca}.login-form{display:grid;gap:16px;margin-top:24px}.login-form label{display:grid;gap:8px;font-weight:700}.login-form input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #2a3550;background:#090e18;color:#fff;font:inherit}.admin-head-actions{display:flex;gap:10px;align-items:center}.admin-head-actions span{font-size:12px;color:#9ea8ba}.admin-status{position:fixed;right:20px;bottom:20px;max-width:440px;padding:12px 16px;border-radius:12px;background:#0d1320;color:#fff;box-shadow:0 10px 30px #0004;z-index:60}.admin-status:empty{display:none}.admin-status[data-type="error"]{background:#4f1118}.admin-status[data-type="ok"]{background:#103b2d}.shot-label{display:inline-block;margin:0 0 8px;padding:5px 9px;border-radius:999px;background:#eef3fb;color:#24314b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}