/* MAKAN LAB — premium presentation layer v3
   Deliberately additive: the CMS, project cards and app pages keep their
   proven structure while the visual system is upgraded in one safe layer. */

@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --premium-ink:#03050a;
  --premium-panel:rgba(10,16,27,.78);
  --premium-line:rgba(157,214,255,.13);
  --premium-glow:0 24px 90px -42px rgba(24,207,255,.62);
  --premium-glow-green:0 24px 90px -42px rgba(34,229,138,.55);
  --premium-shadow:0 30px 100px -55px #000;
  --radius-2xl:36px;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

html{ color-scheme:dark; }
body{
  background:
    radial-gradient(circle at 16% -8%,rgba(34,229,138,.075),transparent 30rem),
    radial-gradient(circle at 92% 12%,rgba(59,107,255,.095),transparent 34rem),
    var(--premium-ink);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%); mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

/* Navigation becomes a calm floating command bar on wide screens. */
.site-nav{ border-color:transparent; background:linear-gradient(to bottom,rgba(3,5,10,.9),rgba(3,5,10,.68)); }
.site-nav::after{ content:""; position:absolute; left:50%; bottom:0; width:min(1180px,calc(100% - 48px)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(19,200,245,.24),transparent); }
.brand-mark{ position:relative; isolation:isolate; box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 30px -12px rgba(19,200,245,.9); }
.brand-mark::after{ content:""; position:absolute; inset:1px; z-index:-1; border-radius:10px; background:linear-gradient(145deg,rgba(255,255,255,.65),transparent 44%); opacity:.42; }
.nav-links{ background:rgba(9,15,25,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 50px -35px #000; }
.nav-links a{ letter-spacing:-.01em; }
.nav-links a.is-current{ background:linear-gradient(135deg,rgba(34,229,138,.12),rgba(19,200,245,.1)); box-shadow:inset 0 0 0 1px rgba(19,200,245,.12); }

/* Hero: editorial scale, stronger intent and better proof. */
.hero{ min-height:min(960px,100svh); border-bottom:1px solid rgba(255,255,255,.04); }
.hero::after{ content:""; position:absolute; width:42rem; height:42rem; left:52%; top:5rem; border:1px solid rgba(19,200,245,.09); border-radius:50%; box-shadow:0 0 0 7rem rgba(19,200,245,.018),0 0 0 14rem rgba(59,107,255,.012); pointer-events:none; }
.hero-bg-video{ opacity:.11; filter:saturate(.8) contrast(1.1); -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 95%); mask-image:linear-gradient(to bottom,#000 45%,transparent 95%); }
.hero-grid{ grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:clamp(40px,6vw,96px); }
.hero-main{ max-width:760px; }
.hero-title{ text-wrap:balance; text-shadow:0 18px 80px rgba(0,0,0,.48); }
.hero-title .grad-text{ filter:drop-shadow(0 14px 34px rgba(19,200,245,.16)); }
.hero-eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-8px 0 12px; color:#c8d6e4; font:600 12px/1.5 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; }
.hero-eyebrow span{ color:var(--brand-cyan); opacity:.6; }
.hero-sub{ font-size:clamp(17px,1.45vw,21px); line-height:1.7; }
.hero-actions .btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 45px -30px rgba(19,200,245,.75); }
.hero-proof{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; color:var(--color-text-faint); font:500 11px/1.6 var(--font-mono); }
.hero-proof span{ color:var(--brand-green); }
.hero-stats div{ position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.046),rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.hero-stats div::after{ content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--brand-cyan),transparent); opacity:.25; }
.term{ position:relative; transform:perspective(1200px) rotateY(-2.5deg) rotateX(1deg); background:linear-gradient(145deg,rgba(12,20,33,.92),rgba(6,10,18,.84)); box-shadow:var(--premium-glow),var(--premium-shadow),inset 0 1px 0 rgba(255,255,255,.055); }
.term::before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:linear-gradient(145deg,rgba(34,229,138,.35),transparent 34%,transparent 65%,rgba(59,107,255,.35)); filter:blur(.2px); }

/* Proof rail gives the homepage immediate credibility. */
.proof-rail{ position:relative; z-index:2; border-bottom:1px solid var(--color-border); background:rgba(5,9,15,.74); backdrop-filter:blur(18px); }
.proof-rail-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.proof-rail-grid>div{ min-height:112px; padding:26px 24px; border-left:1px solid var(--color-border); display:flex; flex-direction:column; justify-content:center; }
.proof-rail-grid>div:last-child{ border-right:1px solid var(--color-border); }
.proof-rail strong{ font:650 15px/1.3 var(--font-display); color:#f2f7fb; }
.proof-rail span{ margin-top:6px; color:var(--color-text-faint); font-size:12.5px; line-height:1.45; }

/* Premium surface language shared by every content type. */
.eps-flagship-card,.work-card,.app-card,.story-block,.contact-card,.footer-cta,.featured-app-card,.detail-aside,.trust-card{
  background:linear-gradient(145deg,rgba(16,25,40,.92),rgba(7,12,21,.86));
  border-color:var(--premium-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--premium-shadow);
}
.eps-flagship-card{ border-radius:var(--radius-2xl); isolation:isolate; }
.eps-flagship-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 24%,transparent 72%,rgba(59,107,255,.04)); }
.eps-flagship-logo img{ filter:drop-shadow(0 20px 38px rgba(19,200,245,.24)); }
.work-card,.app-card{ position:relative; transform:translateZ(0); }
.work-card::after,.app-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(36rem circle at 20% 0%,rgba(19,200,245,.08),transparent 45%); }
.work-card:hover::after,.app-card:hover::after{ opacity:1; }
.work-card:hover,.app-card:hover{ transform:translateY(-7px); border-color:rgba(19,200,245,.42); box-shadow:var(--premium-glow),0 32px 80px -44px #000; }
.work-cover::after,.app-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 52%,rgba(5,8,14,.7)); pointer-events:none; }
.work-cover-badge,.app-cat-badge{ backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.section-head h2{ text-wrap:balance; letter-spacing:-.035em; }
.section-head>p{ line-height:1.75; }

/* Forms should feel like a product surface, not a browser default. */
.contact-card{ border-radius:28px; }
.field input,.field textarea{ background:rgba(3,7,13,.64); border-color:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.field input:hover,.field textarea:hover{ border-color:rgba(255,255,255,.18); }
.field input:focus,.field textarea:focus{ background:rgba(5,11,19,.92); border-color:rgba(19,200,245,.65); box-shadow:0 0 0 4px rgba(19,200,245,.09),inset 0 1px 0 rgba(255,255,255,.03); }
.field-honey{ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }

/* Product and detail pages. */
.page-hero,.detail-hero{ background:radial-gradient(circle at 18% 5%,rgba(34,229,138,.085),transparent 28rem),radial-gradient(circle at 88% 20%,rgba(59,107,255,.1),transparent 32rem); }
.page-title{ text-wrap:balance; }
.detail-meta-card{ backdrop-filter:blur(16px); }
.gallery-main{ box-shadow:0 36px 100px -50px #000; }
.eps-page{ background:radial-gradient(circle at 20% 4%,rgba(34,229,138,.06),transparent 35rem),radial-gradient(circle at 92% 8%,rgba(59,107,255,.08),transparent 38rem); }
.eps-hero-inner{ max-width:720px; }
.eps-title{ text-wrap:balance; }
.eps-download-trust{ display:flex; flex-wrap:wrap; gap:7px 15px; margin:16px 0 0; color:var(--color-text-faint); font:500 11px/1.5 var(--font-mono); }
.eps-download-trust span{ color:var(--brand-green); }
.eps-window{ box-shadow:var(--premium-glow),0 45px 120px -55px #000; }
.eps-feature,.eps-step,.eps-hash,.eps-oss{ border-color:var(--premium-line); background:linear-gradient(145deg,rgba(15,24,38,.9),rgba(7,12,20,.85)); }

/* Footer becomes a deliberate final conversion surface. */
.site-footer{ position:relative; overflow:hidden; background:linear-gradient(to bottom,rgba(4,7,12,.95),#020306); }
.site-footer::before{ content:""; position:absolute; left:50%; top:8%; width:65rem; height:32rem; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(19,200,245,.075),transparent 64%); pointer-events:none; }
.footer-cta{ border-radius:var(--radius-2xl); }
.footer-bottom{ color:var(--color-text-faint); }

/* Motion and responsive polish. */
@media (max-width:980px){
  .hero{ padding-top:calc(var(--nav-h) + 76px); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-main{ max-width:800px; }
  .hero-side{ max-width:760px; width:100%; }
  .term{ transform:none; }
  .proof-rail-grid{ grid-template-columns:repeat(2,1fr); }
  .proof-rail-grid>div:nth-child(3){ border-top:1px solid var(--color-border); }
  .proof-rail-grid>div:nth-child(4){ border-top:1px solid var(--color-border); }
}

@media (max-width:640px){
  :root{ --radius-2xl:25px; }
  body::before{ background-size:44px 44px; }
  .site-nav::after{ width:calc(100% - 32px); }
  .hero{ padding-top:calc(var(--nav-h) + 46px); }
  .hero::after{ display:none; }
  .hero-title{ font-size:clamp(48px,15.7vw,72px); }
  .hero-eyebrow{ font-size:10px; gap:7px; }
  .hero-proof{ display:grid; grid-template-columns:1fr; gap:5px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stats div:last-child{ grid-column:span 2; }
  .term-body{ padding:16px; font-size:11.5px; }
  .term-row{ grid-template-columns:30px minmax(0,1fr) auto; gap:8px; }
  .proof-rail-grid{ grid-template-columns:1fr; padding:0 20px; }
  .proof-rail-grid>div{ min-height:auto; padding:20px 4px; border-left:0; border-right:0!important; border-top:1px solid var(--color-border); }
  .proof-rail-grid>div:first-child{ border-top:0; }
  .eps-flagship-logo img{ width:150px; height:150px; }
  .eps-hero{ padding-top:calc(var(--nav-h) + 42px); }
  .eps-hero-logo{ width:min(58vw,250px)!important; margin-bottom:4px; }
  .eps-title{ font-size:clamp(48px,13.5vw,72px)!important; }
  .eps-btn-download--xl{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .term,.work-card,.app-card{ transform:none!important; }
  .hero-bg-video{ display:none!important; }
}

@media (prefers-contrast:more){
  :root{ --color-border:rgba(255,255,255,.22); --color-border-strong:rgba(255,255,255,.38); --color-text-muted:#bac6d5; }
}