/* =============================================
   SKYMOON STUDIOS — Starfield & Glow Theme
   ============================================= */

:root {
    --bg: #0E0C0A;
    --bg2: #141210;
    --bg3: #1C1916;
    --card: rgba(28, 25, 22, .6);
    --card-hover: rgba(38, 34, 30, .8);

    --cream: #F5EDE3;
    --sand: #E6D5C3;
    --caramel: #D4A574;
    --toffee: #C8956C;
    --brown: #A67B5B;
    --mocha: #8C6A50;
    --muted: #887E74;
    --dim: #5C554D;

    --text: #F0E8DF;
    --text2: #BDB2A6;
    --text3: #8A7F73;

    --glow: rgba(212, 165, 116, .15);
    --glow2: rgba(200, 149, 108, .08);

    --ff: 'Fraunces', Georgia, serif;
    --fb: 'Outfit', -apple-system, sans-serif;

    --r: 14px;
    --r2: 22px;
    --r3: 32px;
    --pill: 9999px;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --out: cubic-bezier(.22, 1, .36, 1);

    --nav-h: 72px;
    color-scheme: dark;
}

/* ── Light Theme ── */
[data-theme="light"] {
    --bg: #E0D5C8;
    --bg2: #D6CBBF;
    --bg3: #CCC0B3;
    --card: rgba(255, 255, 255, .4);
    --card-hover: rgba(255, 255, 255, .55);

    --cream: #1C1916;
    --sand: #2A2622;
    --text: #2A2420;
    --text2: #4A4138;
    --text3: #6E665E;
    --muted: #605850;
    --dim: #8A8278;

    --glow: rgba(166, 123, 91, .2);
    --glow2: rgba(166, 123, 91, .12);
    color-scheme: light;
}
[data-theme="light"] .section--dark { background: var(--bg2); }
[data-theme="light"] .grain { opacity: .015; }
[data-theme="light"] .preloader { background: var(--bg); }
[data-theme="light"] .pre-text { color: var(--cream); }
[data-theme="light"] .pre-bar { background: rgba(0,0,0,.06); }
[data-theme="light"] .nav.scrolled { background: rgba(224,213,200,.92); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
[data-theme="light"] .service-tile,
[data-theme="light"] .tl-card,
[data-theme="light"] .project-showcase,
[data-theme="light"] .form-card,
[data-theme="light"] .feature-pill,
[data-theme="light"] .cc-item { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .tl-card-inner,
[data-theme="light"] .cc-inner,
[data-theme="light"] .form-inner { background: var(--bg); }
[data-theme="light"] .field input,
[data-theme="light"] .field textarea { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .tile-tags span { background: rgba(166,123,91,.08); border-color: rgba(166,123,91,.12); }
[data-theme="light"] .mq-chip { background: var(--card); border-color: rgba(0,0,0,.05); }
[data-theme="light"] .ps-badge { background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .browser-mock { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .bm-bar { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.05); }
[data-theme="light"] .phone-mock { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .soc-btn { background: var(--card); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .stat-sep { background: rgba(0,0,0,.06); }
[data-theme="light"] .btn-ghost { border-color: rgba(0,0,0,.12); color: var(--text); }
[data-theme="light"] .btn-ghost:hover { border-color: var(--caramel); color: var(--caramel); background: rgba(212,165,116,.06); }
[data-theme="light"] .metric-card { background: rgba(166,123,91,.06); border-color: rgba(166,123,91,.1); }
[data-theme="light"] .footer { border-color: rgba(0,0,0,.05); }
[data-theme="light"] .footer-bottom { border-color: rgba(0,0,0,.05); }
[data-theme="light"] .drawer { background: rgba(224,213,200,.97); }
[data-theme="light"] .toggle-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .toggle-btn:hover { background: rgba(0,0,0,.08); }

/* Light mode depth & warmth */
[data-theme="light"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 20% 25%, rgba(212,165,116,.1) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 80% 75%, rgba(166,123,91,.07) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
[data-theme="light"] .section--dark {
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
}
[data-theme="light"] .service-tile,
[data-theme="light"] .feature-pill,
[data-theme="light"] .tl-card,
[data-theme="light"] .form-card,
[data-theme="light"] .cc-item {
    box-shadow: 0 2px 16px rgba(120,100,80,.07), 0 1px 3px rgba(120,100,80,.05);
}
[data-theme="light"] .service-tile:hover,
[data-theme="light"] .tl-card:hover {
    box-shadow: 0 8px 40px rgba(120,100,80,.12), 0 2px 8px rgba(120,100,80,.08);
}
[data-theme="light"] .project-showcase {
    box-shadow: 0 4px 30px rgba(120,100,80,.08), 0 1px 4px rgba(120,100,80,.05);
    border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .project-showcase:hover {
    box-shadow: 0 12px 50px rgba(120,100,80,.14), 0 2px 8px rgba(120,100,80,.08);
    border-color: rgba(166,123,91,.15);
}
[data-theme="light"] .orbit-ring {
    border-color: rgba(166,123,91,.08);
}
[data-theme="light"] .orbit-ring::after {
    color: var(--brown);
    opacity: .4;
}
[data-theme="light"] .btn-glow-bg {
    background: linear-gradient(135deg, var(--brown), var(--caramel));
}
[data-theme="light"] .btn-glow-bg::before {
    background: linear-gradient(135deg, var(--brown), var(--caramel), var(--toffee), var(--brown));
}
[data-theme="light"] .grain { opacity: .025; }
[data-theme="light"] .tl-dot {
    box-shadow: 0 0 25px rgba(166,123,91,.25);
}
[data-theme="light"] .ps-badge {
    background: rgba(255,255,255,.8);
    border-color: rgba(0,0,0,.06);
    box-shadow: 0 4px 16px rgba(120,100,80,.1);
}
[data-theme="light"] .macbook-wrap .browser-mock {
    box-shadow: 0 24px 60px rgba(100,80,60,.15);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body { font-family: var(--fb); background: var(--bg); color: var(--text); line-height: 1.7; cursor: none; overflow-x: hidden; transition: background .4s ease, color .4s ease; }
::selection { background: var(--caramel); color: var(--bg); }
a { color: inherit; text-decoration: none; cursor: none; }
button { cursor: none; border: none; background: none; font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.4rem); }
.section { padding: clamp(6rem, 12vw, 10rem) 0; position: relative; }
.section--dark { background: var(--bg2); }

/* ── Canvas ── */
#starfield {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Grain ── */
.grain {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px;
}

/* ── Cursor ── */
.cursor {
    position: fixed; top: 0; left: 0; width: 7px; height: 7px; background: var(--caramel);
    border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%);
    transition: width .25s, height .25s, background .2s;
}
.cursor-aura {
    position: fixed; top: 0; left: 0; width: 40px; height: 40px;
    border: 1.5px solid rgba(212, 165, 116, .25); border-radius: 50%;
    pointer-events: none; z-index: 99998; transform: translate(-50%, -50%);
    transition: width .4s var(--out), height .4s var(--out), border-color .3s;
}
body:has(a:hover) .cursor, body:has(button:hover) .cursor { width: 16px; height: 16px; background: rgba(212,165,116,.5); }
body:has(a:hover) .cursor-aura, body:has(button:hover) .cursor-aura { width: 56px; height: 56px; border-color: var(--caramel); }
@media (pointer: coarse) { .cursor, .cursor-aura { display: none !important; } body, a, button { cursor: auto; } }

/* ── Preloader ── */
.preloader {
    position: fixed; inset: 0; z-index: 99999; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}
.preloader-inner { text-align: center; }
.pre-ring { width: 70px; height: 70px; margin: 0 auto 20px; position: relative; }
.pre-ring svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.pre-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    z-index: 2; opacity: 0;
    animation: logoFadeIn 0.8s 0.3s ease forwards;
}
@keyframes logoFadeIn { to { opacity: 1; } }
.pre-ring circle {
    fill: none; stroke: var(--caramel); stroke-width: 1.5; stroke-linecap: round;
    stroke-dasharray: 251; stroke-dashoffset: 251;
}
.pre-text { font-family: var(--ff); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; color: var(--cream); letter-spacing: .02em; }
.pre-l { display: inline-block; opacity: 0; transform: translateY(20px); }
.pre-sub { font-size: .7rem; letter-spacing: .5em; color: var(--caramel); margin-top: 6px; opacity: 0; font-weight: 300; }
.pre-bar { width: 120px; height: 2px; background: rgba(255,255,255,.05); border-radius: 2px; margin: 18px auto 0; overflow: hidden; }
.pre-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--caramel), var(--toffee)); border-radius: 2px; }

/* ── Nav ── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h);
    display: flex; align-items: center;
    transition: background .5s, backdrop-filter .5s, box-shadow .5s;
}
.nav.scrolled {
    background: rgba(14, 12, 10, .85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
.nav-inner {
    max-width: 1200px; width: 100%; margin: 0 auto;
    padding: 0 clamp(1.2rem, 4vw, 2.4rem);
    display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--ff); font-size: 1rem; font-weight: 500; z-index: 1001; }
.brand-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(212,165,116,.3); box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: border-color .4s, box-shadow .4s; }
.brand:hover .brand-logo { border-color: var(--caramel); box-shadow: 0 2px 12px rgba(212,165,116,.25); }
.brand-icon { font-size: 1.2rem; color: var(--caramel); }
.brand em { font-style: italic; font-weight: 300; color: var(--caramel); }
.nav-links { display: flex; gap: 1.8rem; }
.nav-link {
    font-size: .82rem; font-weight: 400; color: var(--text2); position: relative;
    transition: color .4s;
}
.nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px;
    background: var(--caramel); border-radius: 1px; transition: width .4s var(--out);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--cream); }
.nav-link.active::after { width: 100%; }
.nav-cta {
    font-size: .8rem; font-weight: 500; padding: 8px 20px; border-radius: var(--pill);
    background: var(--caramel); color: var(--bg);
    transition: transform .4s, box-shadow .4s, background .4s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,165,116,.25); background: var(--toffee); }
.sparkle { margin-left: 4px; }

/* Nav Toggles */
.nav-toggles { display: flex; gap: 6px; align-items: center; margin-right: 12px; }
.toggle-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    font-size: .85rem; transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.toggle-btn:hover { background: rgba(255,255,255,.1); border-color: var(--caramel); }
.toggle-icon { transition: transform .4s var(--spring), opacity .3s; position: absolute; }
.toggle-icon.sun { opacity: 1; transform: scale(1) rotate(0deg); }
.toggle-icon.moon { opacity: 0; transform: scale(0) rotate(180deg); }
[data-theme="light"] .toggle-icon.sun { opacity: 0; transform: scale(0) rotate(-180deg); }
[data-theme="light"] .toggle-icon.moon { opacity: 1; transform: scale(1) rotate(0deg); }
.lang-label {
    font-family: var(--fb); font-size: .68rem; font-weight: 600;
    letter-spacing: .04em; color: var(--text2);
}
.toggle-btn:hover .lang-label { color: var(--caramel); }

.burger { display: none; flex-direction: column; gap: 6px; z-index: 1001; padding: 4px; }
.burger span { width: 22px; height: 1.5px; background: var(--cream); border-radius: 2px; transition: transform .35s, opacity .3s; }
.burger.on span:first-child { transform: rotate(45deg) translate(5px, 5px); }
.burger.on span:last-child { transform: rotate(-45deg) translate(5px, -5px); }

.drawer {
    position: fixed; inset: 0; z-index: 999; background: rgba(14,12,10,.96);
    backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .4s;
}
.drawer.open { opacity: 1; pointer-events: all; }
.drawer-link {
    display: block; font-family: var(--ff); font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 500; padding: .5em 0; text-align: center; color: var(--cream);
    opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s, color .3s;
}
.drawer.open .drawer-link { opacity: 1; transform: translateY(0); }
.drawer-link:hover { color: var(--caramel); }
.drawer.open .drawer-link:nth-child(1) { transition-delay: .08s; }
.drawer.open .drawer-link:nth-child(2) { transition-delay: .12s; }
.drawer.open .drawer-link:nth-child(3) { transition-delay: .16s; }
.drawer.open .drawer-link:nth-child(4) { transition-delay: .2s; }
.drawer.open .drawer-link:nth-child(5) { transition-delay: .24s; }
@media (max-width: 768px) { .nav-links { display: none; } .nav-cta { display: none; } .burger { display: flex; } .nav-toggles { margin-right: 8px; } }

/* ── HERO ── */
.hero {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--nav-h); position: relative; overflow: hidden; text-align: center;
}
.hero-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; padding: 4rem 0 2rem; }
.hero-tag {
    display: inline-flex; align-items: center; gap: 8px; font-size: .76rem;
    color: var(--caramel); background: rgba(212,165,116,.06); border: 1px solid rgba(212,165,116,.12);
    border-radius: var(--pill); padding: 6px 16px; margin-bottom: 2rem; letter-spacing: .04em;
    opacity: 0; transform: translateY(12px);
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--caramel); animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.8); } }

.hero-h1 {
    font-family: var(--ff); font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700; line-height: 1.25; margin-bottom: 1.5rem; letter-spacing: -.02em;
    padding-bottom: 0.1em;
}
.line { display: block; overflow: visible; padding-bottom: 0.05em; }
.word { display: inline-block; transform: translateY(120%); }
.glow-text {
    font-style: italic; font-weight: 500;
    background: linear-gradient(135deg, var(--sand), var(--caramel), var(--toffee));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 20px rgba(212,165,116,.3));
}
.dim { font-weight: 300; font-style: italic; color: var(--text2); -webkit-text-fill-color: var(--text2); }

.hero-p { font-size: 1.1rem; color: var(--text2); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.9; font-weight: 300; opacity: 0; transform: translateY(18px); }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(18px); }

/* Orbit rings */
.orbit-ring {
    position: absolute; border-radius: 50%; border: 1px solid rgba(212,165,116,.04);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
}
.orbit-ring-1 { width: 500px; height: 500px; animation: orbit-spin 40s linear infinite; }
.orbit-ring-2 { width: 700px; height: 700px; animation: orbit-spin 60s linear infinite reverse; border-color: rgba(212,165,116,.025); }
.orbit-ring-3 { width: 900px; height: 900px; animation: orbit-spin 80s linear infinite; border-color: rgba(212,165,116,.015); }
.orbit-ring::after {
    content: '✦'; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%);
    color: var(--caramel); font-size: .5rem; opacity: .6;
}
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Buttons */
.btn-glow {
    position: relative; display: inline-flex; align-items: center; padding: 14px 32px;
    border-radius: var(--pill); font-size: .92rem; font-weight: 500; overflow: hidden;
    transition: transform .4s var(--out), box-shadow .4s;
}
.btn-glow-bg {
    position: absolute; inset: 0; background: linear-gradient(135deg, var(--caramel), var(--toffee));
    border-radius: var(--pill); z-index: 0;
    transition: opacity .4s;
}
.btn-glow-bg::before {
    content: ''; position: absolute; inset: -2px; border-radius: var(--pill);
    background: linear-gradient(135deg, var(--caramel), var(--toffee), var(--sand), var(--caramel));
    background-size: 300% 300%; z-index: -1;
    animation: shimmer 3s ease-in-out infinite;
    filter: blur(8px); opacity: .5;
}
@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-glow-text { position: relative; z-index: 1; color: var(--bg); }
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(212,165,116,.35); }
.btn-full { width: 100%; justify-content: center; }

.btn-ghost {
    display: inline-flex; align-items: center; padding: 14px 28px;
    border-radius: var(--pill); font-size: .92rem; font-weight: 500;
    border: 1.5px solid rgba(255,255,255,.1); color: var(--cream);
    transition: all .4s var(--out);
}
.btn-ghost:hover { border-color: var(--caramel); color: var(--caramel); background: rgba(212,165,116,.04); }

/* Stats */
.stats-bar { position: relative; z-index: 2; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.03); }
.stats-row { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-glow-num { font-family: var(--ff); font-size: 1.8rem; font-weight: 600; color: var(--caramel); text-shadow: 0 0 30px rgba(212,165,116,.3); }
.stat-label { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; font-weight: 300; }
.stat-sep { width: 1px; height: 30px; background: rgba(255,255,255,.05); }

/* ── Section headers ── */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .72rem; font-weight: 400; color: var(--caramel);
    letter-spacing: .14em; margin-bottom: 1rem;
}
.ey-line { width: 20px; height: 1px; background: var(--caramel); }
.center-head { text-align: center; margin-bottom: 4rem; }
.sec-title {
    font-family: var(--ff); font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 600; line-height: 1.18; margin-bottom: 1rem; letter-spacing: -.01em;
}

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.lead-p { font-size: 1.08rem; color: var(--cream); margin-bottom: 1rem; font-weight: 400; line-height: 1.85; }
.body-p { color: var(--text2); margin-bottom: 1.8rem; line-height: 1.9; font-weight: 300; }
.feature-list { display: flex; flex-direction: column; gap: 1rem; }
.feature-pill {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
    border-radius: var(--r); background: var(--card); border: 1px solid rgba(255,255,255,.03);
    position: relative; overflow: hidden;
    transition: border-color .5s, transform .5s;
}
.feature-pill:hover { border-color: rgba(212,165,116,.15); transform: translateX(6px); }
.fp-glow {
    position: absolute; top: 0; left: 0; width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(212,165,116,.12), transparent 70%);
    border-radius: 50%; pointer-events: none; opacity: 0;
    transition: opacity .5s;
}
.feature-pill:hover .fp-glow { opacity: 1; }
.fp-icon { font-size: 1.3rem; flex-shrink: 0; }
.fp-text strong { display: block; font-size: .88rem; margin-bottom: 2px; font-weight: 500; }
.fp-text span { font-size: .78rem; color: var(--muted); font-weight: 300; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ── SERVICE TILES ── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }

.service-tile {
    position: relative; border-radius: var(--r2); overflow: hidden;
    background: var(--card); transition: transform .5s var(--out), box-shadow .5s;
}
.service-tile:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,0,0,.3); }

/* Animated gradient border */
.tile-border {
    position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), transparent 40%, var(--caramel) 50%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .5s;
    animation: border-rotate 4s linear infinite;
}
.service-tile:hover .tile-border { opacity: 1; }
@keyframes border-rotate { to { --angle: 360deg; } }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Shine sweep */
.tile-shine {
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,165,116,.06), transparent);
    transform: skewX(-15deg); pointer-events: none; transition: left .8s var(--out);
}
.service-tile:hover .tile-shine { left: 140%; }

.tile-content { position: relative; padding: 2rem; z-index: 1; }
.tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.tile-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 28%, rgba(245,237,227,.16), transparent 34%),
        linear-gradient(135deg, rgba(212,165,116,.22), rgba(140,106,80,.20));
    border: 1.5px solid rgba(212,165,116,.5);
    box-shadow:
        inset 0 1px 0 rgba(245,237,227,.12),
        inset 0 -10px 18px rgba(0,0,0,.08),
        0 8px 20px rgba(0,0,0,.22);
    transition: transform .35s var(--out), background .35s var(--out), border-color .35s var(--out), box-shadow .35s var(--out);
    position: relative;
    color: #E6D5C3;
}
.tile-icon-svg {
    width: 24px;
    height: 24px;
    display: block;
    filter: drop-shadow(0 0 6px rgba(212,165,116,.12));
}
[data-theme="light"] .tile-icon { color: #8C6A50; }
[data-theme="light"] .tile-icon {
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.44), transparent 34%),
        linear-gradient(135deg, rgba(166,123,91,.16), rgba(212,165,116,.08));
    border-color: rgba(140,106,80,.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -10px 18px rgba(0,0,0,.04),
        0 6px 14px rgba(120,100,80,.12);
}
.service-tile:hover .tile-icon {
    transform: translateY(-2px) scale(1.02);
    background:
        radial-gradient(circle at 30% 28%, rgba(245,237,227,.22), transparent 34%),
        linear-gradient(135deg, rgba(212,165,116,.34), rgba(140,106,80,.28));
    border-color: rgba(230,213,195,.72);
    box-shadow:
        inset 0 1px 0 rgba(245,237,227,.14),
        inset 0 -10px 18px rgba(0,0,0,.06),
        0 12px 26px rgba(0,0,0,.26);
}
[data-theme="light"] .service-tile:hover .tile-icon {
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.5), transparent 34%),
        linear-gradient(135deg, rgba(166,123,91,.22), rgba(212,165,116,.12));
    border-color: rgba(140,106,80,.48);
}
.tile-num { display: none; }
.tile-content h3 { font-family: var(--ff); font-size: 1.2rem; margin-bottom: .6rem; font-weight: 500; }
.tile-content p { font-size: .86rem; color: var(--text2); line-height: 1.75; margin-bottom: 1rem; font-weight: 300; }
.tile-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tile-tags span {
    font-size: .68rem; font-weight: 400; padding: 3px 10px; border-radius: var(--pill);
    background: rgba(212,165,116,.05); color: var(--caramel); border: 1px solid rgba(212,165,116,.08);
}
.tile-arrow {
    position: absolute; bottom: 20px; right: 20px; font-size: 1.2rem; color: var(--caramel);
    opacity: 0; transform: translateX(-8px);
    transition: opacity .4s, transform .4s;
}
.service-tile:hover .tile-arrow { opacity: 1; transform: translateX(0); }

/* ── PORTFOLIO ── */
.project-showcase {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center;
    padding: 2.5rem; border-radius: var(--r3); background: var(--card);
    border: 1px solid rgba(255,255,255,.03); margin-bottom: 3rem;
    position: relative; overflow: hidden;
    transition: border-color .5s;
}
.project-showcase:hover { border-color: rgba(212,165,116,.08); }
.project-showcase--flip { grid-template-columns: 1fr 1.2fr; }
.project-showcase--flip .ps-visual { order: 2; }
.project-showcase--flip .ps-info { order: 1; }

.ps-visual { position: relative; }
.ps-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,165,116,.06), transparent 70%);
    pointer-events: none;
}

/* Browser mock */
.browser-mock {
    border-radius: var(--r); overflow: hidden; background: transparent;
    box-shadow: 0 24px 60px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.04);
    position: relative;
}
.bm-body { overflow: hidden; line-height: 0; position: relative; aspect-ratio: 16 / 9; background: #000; min-height: 200px; }
.bm-body img { width: 100%; display: block; transition: transform 8s cubic-bezier(.2,.8,.2,1); }
.browser-mock:hover .bm-body img { transform: translateY(-25%); }
.bm-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    background: #000;
}

/* MacBook 3D Wrap */
.macbook-wrap {
    perspective: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.macbook-screen {
    transform: rotateY(-5deg) rotateX(3deg);
    transform-origin: 50% 100%;
    transition: transform 0.8s var(--out);
    width: 100%;
}
.macbook-wrap:hover .macbook-screen {
    transform: rotateY(-1.5deg) rotateX(1deg);
}
.macbook-base {
    width: 106%;
    height: 2px;
    background: linear-gradient(180deg, #3a3632 0%, #2a2622 100%);
    border-radius: 0 0 2px 2px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.macbook-notch {
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,.08);
    border-radius: 0 0 1px 1px;
    margin-top: 0;
}
.macbook-shadow {
    width: 90%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, transparent 70%);
    margin-top: 4px;
    filter: blur(6px);
}
[data-theme="light"] .macbook-base {
    background: linear-gradient(180deg, #b8a894 0%, #a89880 100%);
}
[data-theme="light"] .macbook-notch {
    background: rgba(80,60,40,.2);
}
[data-theme="light"] .macbook-shadow {
    background: radial-gradient(ellipse at center, rgba(0,0,0,.1) 0%, transparent 70%);
}

/* iPhone mock */
.iphone-mock {
    width: 260px; margin: 0 auto; position: relative;
    background: #1a1714;
    border-radius: 42px;
    padding: 5px;
    border: 1.5px solid rgba(255,255,255,.08);
    box-shadow:
        0 28px 80px rgba(0,0,0,.5),
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 0 1px rgba(0,0,0,.4);
}
.ip-screen {
    background: #0f0e0c;
    border-radius: 37px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 460px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}
.ip-screenshot {
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    display: block; min-height: 460px;
}
/* Status bar */
.ip-status {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px 0; font-size: .62rem; font-weight: 600;
    color: rgba(255,255,255,.85); position: relative; z-index: 2;
}
.ip-time { font-variant-numeric: tabular-nums; }
.ip-island {
    width: 72px; height: 20px;
    background: #000; border-radius: 14px;
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
}
.ip-icons { display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,.8); }
.ip-batt {
    width: 20px; height: 9px; border-radius: 2px;
    border: 1px solid rgba(255,255,255,.35);
    padding: 1px; position: relative;
}
.ip-batt::after {
    content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
    width: 1.5px; height: 4px; background: rgba(255,255,255,.3); border-radius: 0 1px 1px 0;
}
.ip-batt-fill {
    width: 75%; height: 100%; background: #34c759; border-radius: 1px;
}
/* App content */
.ip-app {
    flex: 1; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px;
}
.ip-header { display: flex; justify-content: space-between; align-items: center; }
.ip-greeting { display: flex; flex-direction: column; }
.ip-hello { font-size: .8rem; font-weight: 600; color: var(--cream); }
.ip-sub { font-size: .6rem; color: var(--muted); margin-top: 2px; }
.ip-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--caramel), var(--brown));
    box-shadow: 0 2px 8px rgba(212,165,116,.3);
}
.ip-search-bar {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.04);
    border-radius: 10px; padding: 8px 12px;
    font-size: .6rem; color: var(--text3);
}
.ip-search-icon { font-size: .8rem; opacity: .5; }
.ip-categories { display: flex; gap: 6px; }
.ip-cat {
    font-size: .58rem; padding: 4px 12px; border-radius: var(--pill);
    background: rgba(255,255,255,.04); color: var(--muted);
    white-space: nowrap; transition: all .3s;
}
.ip-cat.active {
    background: linear-gradient(135deg, var(--caramel), var(--toffee));
    color: var(--bg); font-weight: 600;
}
.ip-products { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.ip-product {
    position: relative; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.03);
}
.ip-prod-img {
    aspect-ratio: .85; width: 100%;
}
.ip-prod-fav {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.3); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem; color: #fff;
}
.ip-prod-info {
    padding: 6px 8px; display: flex; flex-direction: column;
}
.ip-prod-name { font-size: .58rem; font-weight: 500; color: var(--cream); }
.ip-prod-price { font-size: .54rem; color: var(--caramel); font-weight: 600; margin-top: 1px; }
/* Tab bar */
.ip-tab-bar {
    display: flex; justify-content: space-around;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255,255,255,.04);
    background: rgba(15,14,12,.9);
    backdrop-filter: blur(12px);
}
.ip-tab {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font-size: .7rem; opacity: .4; transition: opacity .3s;
}
.ip-tab small { font-size: .46rem; color: var(--muted); }
.ip-tab-active { opacity: 1; }
.ip-tab-active small { color: var(--caramel); }
.ip-home-bar {
    width: 100px; height: 4px; background: rgba(255,255,255,.15);
    border-radius: 2px; margin: 6px auto 8px;
}
/* iPhone light mode */
[data-theme="light"] .iphone-mock {
    background: #e0d8d0;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 28px 80px rgba(100,80,60,.2), 0 0 0 1px rgba(0,0,0,.06);
}
[data-theme="light"] .ip-screen { background: #faf8f6; }
[data-theme="light"] .ip-status { color: rgba(0,0,0,.85); }
[data-theme="light"] .ip-island { background: #1a1714; }
[data-theme="light"] .ip-icons { color: rgba(0,0,0,.7); }
[data-theme="light"] .ip-batt { border-color: rgba(0,0,0,.3); }
[data-theme="light"] .ip-batt::after { background: rgba(0,0,0,.2); }
[data-theme="light"] .ip-search-bar { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .ip-product { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.04); }
[data-theme="light"] .ip-tab-bar { background: rgba(250,248,246,.9); border-color: rgba(0,0,0,.05); }
[data-theme="light"] .ip-home-bar { background: rgba(0,0,0,.12); }

.ps-badge {
    position: absolute; background: rgba(28,25,22,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.05); border-radius: var(--pill);
    padding: 7px 14px; font-size: .72rem; font-weight: 500;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: float 5s ease-in-out infinite;
}
.ps-badge-1 { bottom: -8px; right: 16px; }
.ps-badge-2 { top: 16px; right: -8px; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ps-meta { display: flex; gap: 8px; margin-bottom: .7rem; }
.meta-tag { font-size: .68rem; font-weight: 400; padding: 3px 10px; border-radius: var(--pill); background: rgba(255,255,255,.03); color: var(--muted); }
.meta-tag.accent { background: rgba(212,165,116,.07); color: var(--caramel); }
.ps-title { font-family: var(--ff); font-size: 1.7rem; font-weight: 600; margin-bottom: .7rem; letter-spacing: -.01em; }
.ps-info p { font-size: .88rem; color: var(--text2); line-height: 1.8; margin-bottom: 1rem; font-weight: 300; }
.ps-metrics { display: flex; gap: 1rem; margin-top: .8rem; }
.metric-card {
    flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--r);
    background: rgba(212,165,116,.04); border: 1px solid rgba(212,165,116,.06);
}
.mc-val { font-family: var(--ff); font-size: 1.2rem; font-weight: 600; color: var(--caramel); }
.mc-lbl { font-size: .65rem; color: var(--muted); font-weight: 300; }
@media (max-width: 768px) {
    .project-showcase { grid-template-columns: 1fr; padding: 1.4rem; }
    .project-showcase--flip .ps-visual { order: 0; }
    .project-showcase--flip .ps-info { order: 0; }
    .macbook-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
    .macbook-screen { transform: none; }
    .macbook-wrap:hover .macbook-screen { transform: none; }
    .macbook-wrap { perspective: none; }
    .macbook-wrap, .macbook-screen, .browser-mock, .bm-body, .bm-video {
        transform: none !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .bm-body { min-height: 0; aspect-ratio: 16 / 9; }
    .macbook-base, .macbook-shadow { width: 100%; }
    .browser-mock { border-radius: 20px; }
    .phone-mock { width: 200px; }
    .ps-badge-1 { right: 12px; bottom: 12px; }
    .ps-badge-2 { right: 12px; top: 12px; }
}

/* ── MARQUEE ── */
.marquee-wrap { padding: 2.5rem 0; background: var(--bg2); overflow: hidden; }
.marquee-row { overflow: hidden; padding: .6rem 0; }
.marquee-row--rev .mq-track { animation-direction: reverse; }
.mq-track { display: flex; gap: .8rem; width: max-content; animation: slide 50s linear infinite; }
.mq-chip {
    flex-shrink: 0; padding: 9px 20px; border-radius: var(--pill);
    background: var(--card); border: 1px solid rgba(255,255,255,.03);
    font-size: .82rem; font-weight: 400; white-space: nowrap;
    transition: border-color .4s, background .4s, transform .3s, box-shadow .3s;
}
.mq-chip:hover { border-color: rgba(212,165,116,.15); background: rgba(212,165,116,.04); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── TIMELINE / PROCESS ── */
.timeline { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.timeline-line {
    display: none; /* horizontal approach: use cards */
}
.tl-step { position: relative; }
.tl-dot {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--caramel), var(--toffee));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 0 30px rgba(212,165,116,.2);
}
.tl-dot span { font-family: var(--ff); font-size: .75rem; font-weight: 600; color: var(--bg); }
.tl-card {
    position: relative; border-radius: var(--r2); overflow: hidden;
    background: var(--card); padding: 1px;
    transition: transform .5s var(--out);
}
.tl-card:hover { transform: translateY(-5px); }
.tl-card:hover .tile-border { opacity: 1; }
.tl-card-inner { position: relative; padding: 1.8rem; border-radius: inherit; background: var(--bg); text-align: center; z-index: 1; }
.tl-icon { font-size: 1.6rem; margin-bottom: .8rem; display: block; }
.tl-card h3 { font-family: var(--ff); font-size: 1.05rem; margin-bottom: .5rem; font-weight: 500; }
.tl-card p { font-size: .84rem; color: var(--text2); line-height: 1.7; font-weight: 300; }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-cards { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.8rem; }
.cc-item {
    position: relative; border-radius: var(--r); overflow: hidden;
    background: var(--card); padding: 1px;
    transition: transform .4s;
}
.cc-item:hover { transform: translateX(4px); }
.cc-item:hover .tile-border { opacity: 1; }
.cc-inner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: inherit; background: var(--bg2); position: relative; z-index: 1; }
.cc-icon { font-size: 1.2rem; }
.cc-inner small { display: block; font-size: .66rem; color: var(--muted); font-weight: 300; }
.cc-inner span { font-size: .84rem; font-weight: 400; }

.socials { display: flex; gap: 8px; }
.soc-btn {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--card); border: 1px solid rgba(255,255,255,.05);
    transition: border-color .4s, background .4s, transform .4s;
}
.soc-btn svg { width: 15px; height: 15px; }
.soc-btn:hover { border-color: var(--caramel); background: rgba(212,165,116,.05); transform: translateY(-3px); }

.form-card {
    position: relative; border-radius: var(--r3); overflow: hidden;
    background: var(--card); padding: 1px;
}
.form-card:hover .tile-border { opacity: .6; }
.form-inner { padding: 2.2rem; border-radius: inherit; background: var(--bg2); position: relative; z-index: 1; }
.form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .76rem; font-weight: 400; margin-bottom: 5px; color: var(--text2); }
.field input, .field textarea {
    width: 100%; padding: 12px 14px; background: rgba(255,255,255,.025);
    border: 1.5px solid rgba(255,255,255,.05); border-radius: var(--r);
    color: var(--text); font-family: var(--fb); font-size: .88rem; font-weight: 300;
    transition: border-color .4s, box-shadow .4s; outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(212,165,116,.08); }
.field input::placeholder, .field textarea::placeholder { color: var(--text3); }
.field textarea { resize: vertical; min-height: 90px; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } .form-duo { grid-template-columns: 1fr; } }

/* ── FOOTER ── */
.footer { border-top: 1px solid rgba(255,255,255,.03); padding: 2.5rem 0 1.2rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: start; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.footer-brand p { font-size: .82rem; color: var(--muted); margin-top: .6rem; font-style: italic; font-weight: 300; }
.footer-cols { display: flex; gap: 3.5rem; }
.f-col h4 { font-family: var(--ff); font-size: .88rem; margin-bottom: .8rem; font-weight: 500; }
.f-col a { display: block; font-size: .78rem; color: var(--muted); padding: 3px 0; transition: color .4s; font-weight: 300; }
.f-col a:hover { color: var(--caramel); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.03); }
.footer-bottom span { font-size: .7rem; color: var(--text3); font-weight: 300; }

/* ── Reveal ── */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--out), transform .9s var(--out); }
.rv.show { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero-h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
    .orbit-ring { display: none; }
}
@media (max-width: 480px) {
    .section { padding: 4rem 0; }
    .hero-h1 { font-size: 2.2rem; }
    .sec-title { font-size: 1.5rem; }
    .stat-sep { display: none; }
    .stats-row { gap: 1.2rem; }
    .form-inner { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .tile-shine,
    .orbit-ring,
    .cursor,
    .cursor-aura {
        display: none !important;
    }
}