/*
Theme Name: Apple Zone Nadapuram
Theme URI: https://applezone.in
Author: Fathima Misnah
Author URI: https://misnah.com
Description: A premium, cinematic single-page WordPress theme for Apple Zone Nadapuram — a full black glassmorphism experience with scroll reveals, a marquee ventures wall, and an animated falling iPhone. Built to be installed in one click and used as-is.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: applezone
Tags: one-page, dark, e-commerce, custom-menu, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@200;300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ---------------------------------------------
   0. Reset & tokens
--------------------------------------------- */
:root{
  --bg-primary:#050505;
  --bg-secondary:#0a0a0c;
  --bg-tertiary:#121214;
  --silver:#f5f5f7;
  --border:rgba(255,255,255,.1);
  --glass:rgba(255,255,255,.03);
  --glass-hover:rgba(255,255,255,.06);
  --max:1500px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-primary);
  color:#fff;
  font-family:'Outfit',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
h1,h2,h3,p{margin:0;}
.font-serif{font-family:'Playfair Display',serif;}
.font-mono{font-family:'Space Mono',monospace;}
.italic{font-style:italic;}
::selection{background:rgba(245,245,247,.85);color:#050505;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#050505;}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#3a3a3e;}
.az-container{max-width:var(--max);margin:0 auto;padding:0 24px;}
@media(min-width:640px){.az-container{padding:0 40px;}}
.grain-overlay{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:999;}
.skip-link:focus{left:16px;top:16px;}

/* ---------------------------------------------
   1. Reveal / scroll-in animation
--------------------------------------------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.06s;}
.reveal.d2{transition-delay:.12s;}
.reveal.d3{transition-delay:.18s;}
.reveal.d4{transition-delay:.24s;}
.reveal.d5{transition-delay:.3s;}
.reveal.d6{transition-delay:.36s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* masked hero line reveal */
.mask-line{overflow:hidden;}
.mask-line span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);}
.hero-ready .mask-line span{transform:translateY(0);}
.mask-line:nth-child(1) span{transition-delay:.9s;}
.mask-line:nth-child(2) span{transition-delay:1.04s;}

/* ---------------------------------------------
   2. Nav
--------------------------------------------- */
.site-nav{position:fixed;top:0;left:0;width:100%;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  opacity:0;transform:translateY(-80px);
  animation:navIn 1s var(--ease) .2s forwards;}
@keyframes navIn{to{opacity:1;transform:translateY(0);}}
.site-nav.scrolled{background:rgba(0,0,0,.5);backdrop-filter:blur(24px);border-bottom-color:var(--border);}
.site-nav nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
@media(min-width:640px){.site-nav nav{padding:16px 40px;}}
.nav-logo{display:flex;align-items:center;gap:12px;}
.nav-logo img{height:36px;width:36px;border-radius:8px;object-fit:cover;}
.nav-logo span{display:none;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);}
@media(min-width:640px){.nav-logo span{display:block;}}
.nav-links{display:none;align-items:center;gap:36px;}
@media(min-width:768px){.nav-links{display:flex;}}
.nav-links a{position:relative;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.6);transition:color .3s;}
.nav-links a:hover{color:#fff;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;height:1px;width:0;background:#fff;transition:width .3s;}
.nav-links a:hover::after{width:100%;}
.nav-toggle{display:flex;height:36px;width:36px;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
@media(min-width:768px){.nav-toggle{display:none;}}
.nav-toggle span{height:1px;width:24px;background:#fff;transition:transform .3s,opacity .3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-mobile{max-height:0;overflow:hidden;border-top:1px solid var(--border);background:rgba(0,0,0,.85);backdrop-filter:blur(24px);transition:max-height .4s var(--ease);}
.nav-mobile.open{max-height:600px;}
.nav-mobile-inner{display:flex;flex-direction:column;padding:16px 24px;}
.nav-mobile-inner a{border-bottom:1px solid rgba(255,255,255,.05);padding:16px 0;font-size:18px;font-weight:300;color:rgba(255,255,255,.8);}
@media(min-width:768px){.nav-mobile{display:none;}}

/* ---------------------------------------------
   3. Hero
--------------------------------------------- */
.hero{position:relative;height:100vh;width:100%;overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-media video{height:100%;width:100%;object-fit:cover;transform:scale(1);transition:transform 6s linear;}
.hero.scrolled .hero-media video{transform:scale(1.08);}
.hero-overlay-1{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.hero-overlay-2{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent,var(--bg-primary));}
.hero-content{position:relative;z-index:10;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;}
.hero-logo{margin-bottom:32px;height:112px;width:112px;border-radius:24px;object-fit:cover;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;filter:blur(14px);animation:logoIn 2s var(--ease) forwards;}
@keyframes logoIn{to{opacity:1;filter:blur(0);}}
@media(min-width:640px){.hero-logo{height:128px;width:128px;}}
.hero-title{font-weight:300;letter-spacing:-.03em;color:#fff;}
.hero-title .mask-line span{font-size:48px;line-height:1.05;}
@media(min-width:640px){.hero-title .mask-line span{font-size:60px;}}
@media(min-width:768px){.hero-title .mask-line span{font-size:72px;}}
@media(min-width:1024px){.hero-title .mask-line span{font-size:6.5rem;}}
.hero-title em{font-style:italic;color:rgba(255,255,255,.8);}
.hero-sub{margin-top:32px;max-width:560px;font-size:16px;font-weight:300;letter-spacing:.02em;color:rgba(255,255,255,.7);opacity:0;animation:subIn 1.2s var(--ease) 1.7s forwards;}
@keyframes subIn{to{opacity:1;}}
@media(min-width:640px){.hero-sub{font-size:18px;}}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:scrollCueIn 1s var(--ease) 2.4s forwards;}
@keyframes scrollCueIn{to{opacity:1;}}
.hero-scroll span{font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:rgba(255,255,255,.4);}
.hero-scroll-track{position:relative;height:48px;width:1px;overflow:hidden;background:rgba(255,255,255,.15);}
.hero-scroll-track em{position:absolute;left:0;top:0;height:16px;width:1px;background:#fff;animation:scrollDot 1.8s ease-in-out infinite;}
@keyframes scrollDot{0%{transform:translateY(-16px);}100%{transform:translateY(48px);}}

/* ---------------------------------------------
   4. Section label & shared typography
--------------------------------------------- */
.section{position:relative;padding:112px 0;}
@media(min-width:768px){.section{padding:160px 0;}}
.section-tight{padding:96px 0;}
@media(min-width:768px){.section-tight{padding:128px 0;}}
.section-bordered{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:var(--bg-secondary);}
.section-label{display:flex;align-items:center;gap:16px;margin-bottom:56px;}
.section-label .idx{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.3em;color:rgba(255,255,255,.4);}
.section-label .rule{height:1px;width:40px;background:rgba(255,255,255,.2);}
.section-label .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.25em;color:rgba(255,255,255,.5);}
.h2{font-family:'Playfair Display',serif;font-weight:300;letter-spacing:-.02em;line-height:1.1;color:#fff;font-size:36px;}
@media(min-width:640px){.h2{font-size:48px;}}
@media(min-width:1024px){.h2{font-size:60px;}}
.h2 em{font-style:italic;color:rgba(255,255,255,.7);}
.lede{margin-top:24px;max-width:520px;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.55);}
@media(min-width:640px){.lede{font-size:18px;}}
.body-col{margin-top:40px;max-width:560px;font-size:16px;font-weight:300;line-height:1.75;color:rgba(255,255,255,.6);}
@media(min-width:640px){.body-col{font-size:18px;}}
.body-col p{margin-bottom:24px;}
.body-col p:last-child{margin-bottom:0;}
.body-col .strong{color:rgba(255,255,255,.8);}

/* ---------------------------------------------
   5. Grid helpers (12 col)
--------------------------------------------- */
.grid12{display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:768px){.grid12{grid-template-columns:repeat(12,1fr);gap:32px;}}
.c-5{grid-column:span 12;}
.c-7{grid-column:span 12;}
@media(min-width:768px){.c-5{grid-column:span 5;}.c-7{grid-column:span 7;}}

/* ---------------------------------------------
   6. Story image
--------------------------------------------- */
.story-frame{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:24px;border:1px solid var(--border);}
.story-frame img{height:100%;width:100%;object-fit:cover;transform:scale(1.12);}
.story-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);}
.story-meta{margin-top:16px;display:flex;align-items:center;justify-content:space-between;}
.story-meta span{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.4);}

/* ---------------------------------------------
   7. Founder
--------------------------------------------- */
.founder-portrait{position:relative;}
.founder-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:24px;border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.founder-frame img{height:100%;width:100%;object-fit:cover;transform:scale(1.1);}
.founder-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top right,rgba(0,0,0,.5),transparent,rgba(255,255,255,.05));}
.founder-plate{position:absolute;left:24px;bottom:-24px;border-radius:16px;border:1px solid var(--border);background:var(--glass);padding:16px 24px;backdrop-filter:blur(24px);}
.founder-plate p:first-child{font-family:'Playfair Display',serif;font-size:24px;font-weight:300;color:#fff;}
.founder-plate p:last-child{margin-top:4px;font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:rgba(255,255,255,.5);}
.founder-text{display:flex;flex-direction:column;justify-content:center;margin-top:32px;}
@media(min-width:768px){.founder-text{margin-top:0;}}

/* ---------------------------------------------
   8. Ventures marquee
--------------------------------------------- */
.marquee{overflow:hidden;position:relative;width:100%;}
.marquee-track{display:flex;width:max-content;animation:marqueeLeft 40s linear infinite;}
.marquee-track.reverse{animation-name:marqueeRight;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.logo-tile{margin:0 16px;display:flex;height:96px;width:192px;flex-shrink:0;align-items:center;justify-content:center;border-radius:16px;border:1px solid var(--border);background:var(--glass);padding:0 24px;backdrop-filter:blur(8px);transition:background-color .3s,border-color .3s;}
@media(min-width:640px){.logo-tile{margin:0 20px;height:112px;width:224px;}}
.logo-tile:hover{background:var(--glass-hover);border-color:rgba(255,255,255,.25);}
.logo-tile img{max-height:56px;width:auto;max-width:100%;object-fit:contain;opacity:.75;filter:grayscale(1);transition:opacity .5s,filter .5s;}
@media(min-width:640px){.logo-tile img{max-height:64px;}}
.logo-tile:hover img{opacity:1;filter:grayscale(0);}
.marquee-rows{margin-top:64px;display:flex;flex-direction:column;gap:24px;}

/* ---------------------------------------------
   9. Philosophy
--------------------------------------------- */
.chapters{margin-top:80px;}
.chapter{display:grid;grid-template-columns:1fr;gap:24px;border-top:1px solid var(--border);padding:40px 0;transition:border-color .5s;}
@media(min-width:768px){.chapter{grid-template-columns:repeat(12,1fr);gap:40px;align-items:start;}}
.chapter:hover{border-color:rgba(255,255,255,.3);}
.chapter .num{grid-column:span 12;font-family:'Playfair Display',serif;font-size:48px;font-weight:300;color:rgba(255,255,255,.25);transition:color .5s;}
@media(min-width:768px){.chapter .num{grid-column:span 3;font-size:60px;}}
.chapter:hover .num{color:rgba(255,255,255,.6);}
.chapter h3{grid-column:span 12;font-family:'Playfair Display',serif;font-size:24px;font-weight:300;color:#fff;}
@media(min-width:768px){.chapter h3{grid-column:span 4;font-size:30px;}}
.chapter p{grid-column:span 12;max-width:420px;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.55);}
@media(min-width:768px){.chapter p{grid-column:span 5;font-size:18px;}}
.chapters-end{border-top:1px solid var(--border);}

/* ---------------------------------------------
   10. Experience tiles
--------------------------------------------- */
.moments{margin-top:64px;display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:768px){.moments{grid-template-columns:repeat(12,1fr);}}
.moment{grid-column:span 12;}
@media(min-width:768px){.moment.span-7{grid-column:span 7;}.moment.span-5{grid-column:span 5;}}
.moment-frame{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);}
.moment-media{width:100%;overflow:hidden;aspect-ratio:16/10;}
.moment-media.ratio-43{aspect-ratio:4/3;}
.moment-media video,.moment-media img{height:100%;width:100%;object-fit:cover;transform:scale(1.05);transition:transform 1s ease-out;}
.moment-frame:hover .moment-media video,.moment-frame:hover .moment-media img{transform:scale(1.1);}
.moment-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);pointer-events:none;}
.moment-cap{position:absolute;bottom:20px;left:24px;display:flex;align-items:center;gap:12px;z-index:2;}
.moment-cap span:first-child{height:1px;width:24px;background:rgba(255,255,255,.6);}
.moment-cap span:last-child{font-size:14px;font-weight:300;letter-spacing:.02em;color:rgba(255,255,255,.85);}

/* ---------------------------------------------
   11. Promise marquee (outline type)
--------------------------------------------- */
.promise-marquee{overflow:hidden;user-select:none;}
.promise-marquee .marquee-track{animation-duration:38s;}
.promise-marquee span{font-family:'Playfair Display',serif;font-style:italic;font-weight:300;font-size:16vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);white-space:nowrap;}
@media(min-width:768px){.promise-marquee span{font-size:12vw;}}
.promise-inner{max-width:var(--max);margin:0 auto;padding:64px 24px;text-align:center;}
@media(min-width:768px){.promise-inner{padding:96px 40px;}}
.promise-eyebrow{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.3em;color:rgba(255,255,255,.4);}
.promise-title{margin:32px auto 0;max-width:960px;font-family:'Playfair Display',serif;font-weight:300;letter-spacing:-.02em;line-height:1.12;font-size:36px;}
@media(min-width:640px){.promise-title{font-size:60px;}}
@media(min-width:1024px){.promise-title{font-size:72px;}}
.promise-body{margin:40px auto 0;max-width:640px;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.55);}
@media(min-width:640px){.promise-body{font-size:18px;}}

/* ---------------------------------------------
   12. Testimonials
--------------------------------------------- */
.t-grid{margin-top:64px;display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:640px){.t-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.t-grid{grid-template-columns:1fr 1fr 1fr;}}
.t-card{display:flex;height:100%;flex-direction:column;border-radius:24px;border:1px solid var(--border);background:var(--glass);padding:32px;backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,.4);transition:border-color .5s,background-color .5s;}
.t-card:hover{border-color:rgba(255,255,255,.25);background:var(--glass-hover);}
.t-quote-icon{margin-bottom:20px;color:rgba(255,255,255,.15);}
.t-stars{margin-bottom:20px;display:flex;gap:4px;}
.t-body{flex:1;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.7);}
.t-foot{margin-top:28px;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:24px;}
.t-avatar{display:flex;height:44px;width:44px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);font-size:14px;font-weight:500;color:#fff;}
.t-foot .name{font-size:14px;font-weight:500;color:#fff;}
.t-foot .place{margin-top:2px;font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.45);}

/* ---------------------------------------------
   13. Review video section
--------------------------------------------- */
.review{position:relative;display:flex;min-height:100vh;width:100%;align-items:flex-end;overflow:hidden;background:#000;}
.review video{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;}
.review-overlay-1{position:absolute;inset:0;background:rgba(0,0,0,.35);}
.review-overlay-2{position:absolute;inset:0;background:linear-gradient(to top,var(--bg-primary),rgba(0,0,0,.2),rgba(0,0,0,.4));}
.review-label{position:absolute;left:24px;top:112px;z-index:10;display:flex;align-items:center;gap:16px;}
@media(min-width:640px){.review-label{left:40px;}}
.review-label .idx{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.3em;color:rgba(255,255,255,.6);}
.review-label .rule{height:1px;width:40px;background:rgba(255,255,255,.3);}
.review-label .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.25em;color:rgba(255,255,255,.7);}
.review-mute{position:absolute;right:24px;top:112px;z-index:20;display:flex;height:48px;width:48px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:rgba(255,255,255,.85);backdrop-filter:blur(8px);transition:border-color .3s,color .3s;}
@media(min-width:640px){.review-mute{right:40px;}}
.review-mute:hover{border-color:rgba(255,255,255,.5);color:#fff;}
.review-bottom{position:relative;z-index:10;width:100%;padding:0 24px 64px;}
@media(min-width:640px){.review-bottom{padding:0 40px 96px;}}
.review-bottom-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:24px;}
.review-title{max-width:720px;font-family:'Playfair Display',serif;font-weight:300;letter-spacing:-.02em;line-height:1.1;font-size:36px;color:#fff;}
@media(min-width:640px){.review-title{font-size:48px;}}
@media(min-width:1024px){.review-title{font-size:60px;}}
.review-who{font-size:16px;font-weight:300;color:rgba(255,255,255,.85);}
.review-who span{margin-left:8px;color:rgba(255,255,255,.45);}

/* ---------------------------------------------
   14. Contact
--------------------------------------------- */
.contact-side{display:flex;flex-direction:column;}
.contact-addr{margin-top:32px;display:flex;align-items:flex-start;gap:16px;color:rgba(255,255,255,.6);}
.contact-addr p{font-size:18px;font-weight:300;}
.contact-logo{margin-top:48px;height:64px;width:64px;border-radius:16px;object-fit:cover;opacity:.8;}
.glass-list{display:grid;grid-template-columns:1fr;gap:16px;}
.glass-card{display:flex;align-items:center;justify-content:space-between;border-radius:16px;border:1px solid var(--border);background:var(--glass);padding:24px;backdrop-filter:blur(24px);transition:border-color .3s,background-color .3s;}
.glass-card:hover{border-color:rgba(255,255,255,.25);background:var(--glass-hover);}
.glass-card-left{display:flex;align-items:center;gap:20px;}
.glass-icon{display:flex;height:48px;width:48px;flex-shrink:0;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);}
.glass-text .lbl{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.4);}
.glass-text .val{margin-top:4px;font-size:16px;font-weight:300;color:rgba(255,255,255,.9);}
@media(min-width:640px){.glass-text .val{font-size:18px;}}
.glass-arrow{color:rgba(255,255,255,.3);transition:transform .3s,color .3s;}
.glass-card:hover .glass-arrow{transform:translate(4px,-4px);color:#fff;}

/* ---------------------------------------------
   15. Footer
--------------------------------------------- */
.site-footer{border-top:1px solid var(--border);background:var(--bg-primary);}
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:32px;padding:56px 24px;}
@media(min-width:640px){.footer-inner{padding:56px 40px;}}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center;}}
.footer-brand{display:flex;align-items:center;gap:16px;}
.footer-brand img{height:44px;width:44px;border-radius:12px;object-fit:cover;}
.footer-brand .name{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.footer-brand .role{margin-top:4px;font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.4);}
.footer-copy{font-size:12px;font-weight:300;color:rgba(255,255,255,.35);}

/* ---------------------------------------------
   16. Falling iPhone (desktop only, decorative)
--------------------------------------------- */
.falling-iphone{pointer-events:none;position:fixed;right:4vw;top:0;z-index:40;display:none;will-change:transform;}
@media(min-width:768px){.falling-iphone{display:block;}}
.iphone-bob{animation:iphoneBob 6s ease-in-out infinite;}
@keyframes iphoneBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.iphone-device{position:relative;width:150px;height:312px;border-radius:38px;padding:3px;
  background:linear-gradient(150deg,#f7f7fb 0%,#cfd0d4 22%,#8d8e93 48%,#e9eaee 62%,#a9aaae 80%,#f4f4f7 100%);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.25) inset,0 0 6px rgba(255,255,255,.6) inset;}
.iphone-device i{position:absolute;background:#b8b9bd;}
.iphone-btn-1{left:-2px;top:74px;height:32px;width:3px;border-radius:2px 0 0 2px;}
.iphone-btn-2{left:-2px;top:112px;height:48px;width:3px;border-radius:2px 0 0 2px;}
.iphone-btn-3{right:-2px;top:100px;height:64px;width:3px;border-radius:0 2px 2px 0;}
.iphone-screen{position:relative;height:100%;width:100%;overflow:hidden;border-radius:35px;background:radial-gradient(120% 90% at 50% 0%,#23232a 0%,#0c0c10 55%,#050506 100%);}
.iphone-glow{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 38%,rgba(180,190,220,.28) 0%,rgba(0,0,0,0) 70%);}
.iphone-island{position:absolute;left:50%;top:10px;height:22px;width:62px;transform:translateX(-50%);border-radius:999px;background:#000;}
.iphone-sweep{position:absolute;top:0;bottom:0;left:-16px;right:-16px;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 60%);}

/* utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}