:root{--ink:#14213d;--night:#0b1230;--bg:#f6f7fb;--paper:#fff;--accent:#3a5bff;--sun:#ffb703;--muted:#5b6478;--line:#dfe3ee;
--bs-body-font-family:'Inter',system-ui,sans-serif;--bs-body-color:var(--ink);--bs-body-bg:var(--bg);--bs-link-color:var(--accent)}
body{line-height:1.7}
h1,h2,h3,h4,.brand{font-family:'Sora',sans-serif;letter-spacing:-.02em;line-height:1.15}
.navbar{background:rgba(11,18,48,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{font-weight:700;color:#fff;text-decoration:none;font-size:1.25rem}.brand span{color:var(--sun)}
.nav-link{color:#c9d1f5!important;font-weight:500}.nav-link:hover,.nav-link.active{color:#fff!important}
.navbar-toggler{border-color:rgba(255,255,255,.4)}.navbar-toggler-icon{filter:invert(1)}
.btn-accent{background:var(--accent);color:#fff;border:0;border-radius:.7rem;padding:.75rem 1.5rem;font-weight:600;box-shadow:0 8px 24px rgba(58,91,255,.35)}
.btn-accent:hover{background:#2a45d6;color:#fff}
.btn-line{border:1.5px solid currentColor;border-radius:.7rem;padding:.75rem 1.5rem;font-weight:600;color:var(--ink)}
.hero-dark .btn-line{color:#fff}.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
/* hero + 3D carousel */
.hero-dark{background:radial-gradient(60rem 28rem at 50% -8%,#2d45c9 0,transparent 62%),var(--night);color:#fff;padding:4.5rem 0 3.5rem;overflow:hidden}
.hero-dark h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:700;max-width:46rem;margin:0 auto 1rem}
.hero-dark .sub{color:#b8c2ee;font-size:1.15rem;max-width:36rem;margin:0 auto 1.8rem}
.stage{margin-top:3rem;perspective:1200px}
.swiper{padding:1.5rem 0 3rem}
.swiper-slide{width:300px;height:390px;border-radius:1.2rem;overflow:hidden;background:linear-gradient(145deg,#1c2a6b,var(--accent));box-shadow:0 30px 60px rgba(0,0,0,.45)}
.slide-link{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:1.3rem;color:#fff;text-decoration:none;position:relative}
.slide-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-link::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,35,.9),transparent 60%);z-index:1}
.slide-link>*:not(img){position:relative;z-index:2}
.slide-link h3{font-size:1.3rem;margin:.4rem 0 .2rem}.slide-link p{margin:0;color:#d5dcff;font-size:.9rem}
.swiper-pagination-bullet{background:#fff;opacity:.4}.swiper-pagination-bullet-active{background:var(--sun);opacity:1}
.section{padding:4.5rem 0}.section-alt{background:var(--paper);border-block:1px solid var(--line)}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:1.1rem;padding:1.7rem;height:100%}
.section-alt .tile{background:var(--bg)}
.ic{font-size:1.8rem;color:var(--accent)}
.chip{display:inline-block;font-size:.8rem;padding:.15rem .65rem;border-radius:2rem;background:#e8ecff;color:#2a3fa8;margin:0 .3rem .3rem 0}
.proj,.postcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:1.1rem;overflow:hidden;background:var(--paper);height:100%;transition:transform .2s,box-shadow .2s}
.proj:hover,.postcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,33,61,.12)}
.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--ink),var(--accent));display:flex;align-items:end;padding:1rem;color:#fff;font-family:Sora,sans-serif;font-weight:600}
.thumb img{width:100%;height:100%;object-fit:cover;margin:-1rem;padding:0}
.thumb:has(img){padding:0}.thumb img{margin:0}
.demo-tag{font-size:.75rem;color:var(--muted)}
.cover{width:100%;border-radius:1.1rem;margin-bottom:2rem;aspect-ratio:16/8;object-fit:cover}
.form-control{border-radius:.7rem;border-color:var(--line);padding:.75rem .95rem}
.prose{max-width:44rem}.prose p{margin-bottom:1.1rem}.prose img{max-width:100%;border-radius:.8rem}
.page-head{background:var(--night);color:#fff;padding:3.5rem 0}.page-head p{color:#b8c2ee;margin:0}
.step{border-left:3px solid var(--accent);padding-left:1rem}
footer{background:var(--night);color:#b8c2ee;padding:3rem 0 1.5rem}footer a{color:#b8c2ee;text-decoration:none}footer a:hover{color:#fff}
.wa{position:fixed;right:1.2rem;bottom:1.2rem;width:3.4rem;height:3.4rem;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.6rem;box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:50}
@media(max-width:576px){.swiper-slide{width:240px;height:320px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* hero text 3D animation */
.hero-dark .container{perspective:900px}
.hero-dark h1{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform;
 text-shadow:0 2px 0 rgba(58,91,255,.55),0 4px 0 rgba(58,91,255,.35),0 14px 30px rgba(0,0,0,.45)}
.hero-dark h1 .w{display:inline-block;opacity:0;transform:rotateX(-80deg) translateY(.6em);transform-origin:50% 100%}
.hero-dark h1.go .w{opacity:1;transform:none;
 transition:transform .85s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms),opacity .6s ease calc(var(--i)*90ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-dark .sub,.hero-dark .btn{animation:rise .7s .9s both}
@media(prefers-reduced-motion:reduce){.hero-dark .sub,.hero-dark .btn{animation:none}}


.stars{color:var(--sun);letter-spacing:2px}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-weight:600;flex:none}


/* flip cards */
.flip{perspective:1000px;height:350px;outline:none;cursor:pointer}
.flip-inner{position:relative;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
@media(hover:hover){.flip:hover .flip-inner{transform:rotateY(180deg)}}
.flip.flipped .flip-inner,.flip:focus-visible .flip-inner,.flip:has(a:focus-visible) .flip-inner{transform:rotateY(180deg)}
.flip:focus-visible{outline:3px solid var(--sun);outline-offset:4px;border-radius:1.2rem}
.flip-face{position:absolute;inset:0;border-radius:1.2rem;padding:1.7rem;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{justify-content:center;align-items:flex-start;color:#fff;background:linear-gradient(145deg,var(--night),#243ac0);box-shadow:0 18px 40px rgba(20,33,61,.2)}
.flip-front i.bi:first-child{font-size:2.5rem;color:var(--sun)}
.flip-front h3{font-size:1.3rem;margin:.9rem 0 0}
.flip-front .hint{margin-top:auto;color:#b8c2ee;font-size:.85rem}
.flip-back{transform:rotateY(180deg);justify-content:space-between;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,33,61,.1)}
.flip-back p{font-size:.95rem;margin-bottom:.6rem}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}
.inc{list-style:none;padding:0;margin:0;font-size:.9rem}
.inc li{position:relative;padding-left:1.5rem;margin-bottom:.25rem}
.inc li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;color:var(--accent)}
.price{color:var(--muted);font-size:.9rem;margin-bottom:.3rem}
.price strong{color:var(--ink);font-size:1.1rem}

.inc{list-style:none;padding:0;margin:0;font-size:.9rem}
.inc li{position:relative;padding-left:1.5rem;margin-bottom:.25rem}
.inc li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;color:var(--accent)}
.price{color:var(--muted);font-size:.9rem;margin-bottom:.3rem}
.price strong{color:var(--ink);font-size:1.1rem}


/* testimonial carousel */
.t-swiper{padding:.5rem .25rem 3rem}
.t-swiper .swiper-slide{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;display:flex}
.t-swiper .swiper-slide .tile{width:100%}
.t-swiper .swiper-pagination-bullet{background:var(--ink);opacity:.25}
.t-swiper .swiper-pagination-bullet-active{background:var(--accent);opacity:1}


/* dark mode */
[data-bs-theme=dark]{--ink:#e8ecff;--bg:#0b1020;--paper:#121a33;--line:#25305a;--muted:#a3adcf;--bs-body-bg:#0b1020;--bs-body-color:#e8ecff}
[data-bs-theme=dark] .btn-line:hover{background:#fff;color:var(--night);border-color:#fff}
[data-bs-theme=dark] .thumb{background:linear-gradient(135deg,var(--night),var(--accent))}
[data-bs-theme=dark] .chip{background:rgba(58,91,255,.22);color:#b7c3ff}
[data-bs-theme=dark] .form-control{background:#0f1730;color:#e8ecff}
/* theme button */
.theme-btn{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;display:grid;place-items:center}
.theme-btn:hover{background:rgba(255,255,255,.12)}
.theme-btn .icon-sun{display:none}
[data-bs-theme=dark] .theme-btn .icon-sun{display:block}
[data-bs-theme=dark] .theme-btn .icon-moon{display:none}
/* mobile drawer */
.navbar .offcanvas-lg{--bs-offcanvas-bg:var(--night);--bs-offcanvas-color:#fff;--bs-offcanvas-width:290px}
@media(max-width:991.98px){
 .navbar .offcanvas-lg .nav-link{font-size:1.1rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
 .navbar .offcanvas-lg .btn-accent{width:100%;padding:.8rem}
}


@media(min-width:992px){.navbar .offcanvas-body{flex-grow:1;justify-content:flex-end}}

.err404 .big{font-family:Sora,sans-serif;font-weight:700;font-size:clamp(5rem,18vw,10rem);line-height:1;background:linear-gradient(135deg,var(--accent),var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1rem}




/* ===== LIGHT MODE (dark mode is not affected) ===== */
html:not([data-bs-theme=dark]) .navbar{background:rgba(255,255,255,.88);border-bottom:1px solid var(--line)}
html:not([data-bs-theme=dark]) .navbar .brand{color:var(--ink)}
html:not([data-bs-theme=dark]) .navbar .nav-link{color:var(--ink)!important}
html:not([data-bs-theme=dark]) .navbar .nav-link:hover,
html:not([data-bs-theme=dark]) .navbar .nav-link.active{color:var(--accent)!important}
html:not([data-bs-theme=dark]) .theme-btn{border-color:rgba(20,33,61,.35);color:var(--ink)}
html:not([data-bs-theme=dark]) .theme-btn:hover{background:rgba(20,33,61,.08)}
html:not([data-bs-theme=dark]) .navbar-toggler{border-color:rgba(20,33,61,.3)}
html:not([data-bs-theme=dark]) .navbar-toggler-icon{filter:none}

/* hero */
html:not([data-bs-theme=dark]) .hero-dark{background:radial-gradient(60rem 28rem at 50% -8%,#dbe3ff 0,transparent 62%),var(--bg);color:var(--ink)}
html:not([data-bs-theme=dark]) .hero-dark h1{text-shadow:0 2px 0 rgba(58,91,255,.15),0 12px 28px rgba(20,33,61,.12)}
html:not([data-bs-theme=dark]) .hero-dark .sub{color:var(--muted)}
html:not([data-bs-theme=dark]) .hero-dark .btn-line{color:var(--ink)}
html:not([data-bs-theme=dark]) .hero-dark .btn-line:hover{color:#fff}
html:not([data-bs-theme=dark]) .hero-dark .swiper-pagination-bullet{background:var(--ink)}
html:not([data-bs-theme=dark]) .hero-dark .swiper-pagination-bullet-active{background:var(--accent)}
html:not([data-bs-theme=dark]) .swiper-slide{box-shadow:0 24px 50px rgba(20,33,61,.25)}

/* page headers (Services, Work, Blog, Contact ...) */
html:not([data-bs-theme=dark]) .page-head{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
html:not([data-bs-theme=dark]) .page-head p{color:var(--muted)}

/* mobile drawer */
html:not([data-bs-theme=dark]) .mobile-menu{--bs-offcanvas-bg:#fff;--bs-offcanvas-color:var(--ink);border-left-color:var(--line)}
html:not([data-bs-theme=dark]) .mobile-menu .offcanvas-header{border-bottom-color:var(--line)}
html:not([data-bs-theme=dark]) .mobile-menu .brand{color:var(--ink)}
html:not([data-bs-theme=dark]) .mobile-menu .btn-close{filter:none}
html:not([data-bs-theme=dark]) .m-link{color:var(--ink);border-bottom-color:var(--line)}
html:not([data-bs-theme=dark]) .m-link:hover,
html:not([data-bs-theme=dark]) .m-link.active{color:var(--accent)}