/* Constructive Creativity — UI kit v2 · Futurist editorial */
/* === Design tokens (inlined from colors_and_type.css) === */
/* ============================================
   Constructive Creativity LLC — Design Tokens
   v2 · Futurist editorial · refined precision
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces — deeper, cooler near-black with more nuance ---- */
  --bg:           #07070A;
  --bg-elevated:  #0F0F14;
  --bg-card:      #16161D;
  --surface:      #1E1E27;
  --border:       #26262F;
  --border-soft:  #1C1C24;
  --hairline:     rgba(255, 255, 255, 0.06);

  /* ---- Foreground ---- */
  --fg-1:         #F5F5F3;
  --fg-2:         #A0A0A8;
  --fg-3:         #65656E;

  /* ---- Brand accents — coral → amber, kept from source DNA ---- */
  --accent:       #FF6B6B;
  --accent-hot:   #FF8E6B;
  --accent-2:     #FFB36B;
  --accent-glow:  rgba(255, 107, 107, 0.18);
  --accent-cool:  #6B9DFF;   /* subtler blue, used in tertiary chrome only */

  /* ---- Semantic ---- */
  --success:      #5DD68F;
  --warning:      #FFBD2E;
  --error:        #FF5F56;

  /* ---- Brand gradients ---- */
  --grad-brand:    linear-gradient(135deg, #FF6B6B 0%, #FF8E6B 55%, #FFB36B 100%);
  --grad-button:   linear-gradient(135deg, #FF6B6B 0%, #FF8E6B 100%);
  --grad-divider:  linear-gradient(90deg, transparent, #FF6B6B, transparent);
  --grad-mesh:     radial-gradient(at 20% 0%, rgba(255,107,107,0.18), transparent 50%),
                   radial-gradient(at 80% 100%, rgba(255,179,107,0.10), transparent 55%),
                   radial-gradient(at 50% 50%, rgba(107,157,255,0.05), transparent 60%);

  /* ---- Type families ---- */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ---- Type sizes ---- */
  --t-display:    clamp(2.75rem, 7vw, 6rem);
  --t-section:    clamp(2.25rem, 5.5vw, 4rem);
  --t-heading:    clamp(1.8rem, 4vw, 3rem);
  --t-h3:         1.25rem;
  --t-body-lg:    1.125rem;
  --t-body:       1rem;
  --t-small:      0.875rem;
  --t-micro:      0.7rem;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radii — sharper system ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow / elevation ---- */
  --elev-1:     0 4px 24px rgba(255,107,107,0.15);
  --elev-2:     0 10px 40px rgba(255,107,107,0.30);
  --elev-3:     0 12px 40px rgba(0,0,0,0.40);
  --elev-4:     0 24px 80px rgba(0,0,0,0.50);
  --elev-glass: 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.04) inset, 0 24px 48px rgba(0,0,0,0.4);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Letter-spacing ---- */
  --ls-tight:    -0.04em;
  --ls-tighter:  -0.02em;
  --ls-snug:     -0.01em;
  --ls-meta:     0.16em;
  --ls-eyebrow:  0.22em;
}

/* Semantic styles */
h1, .h1 { font-family:var(--font-display); font-size:var(--t-display); line-height:0.95; letter-spacing:var(--ls-tight); font-weight:400; color:var(--fg-1); }
h2, .h2 { font-family:var(--font-display); font-size:var(--t-section); line-height:1.0;  letter-spacing:var(--ls-tighter); font-weight:400; color:var(--fg-1); }
h3, .h3 { font-family:var(--font-display); font-size:var(--t-heading); line-height:1.1;  letter-spacing:var(--ls-tighter); font-weight:400; color:var(--fg-1); }
h4, .h4 { font-family:var(--font-body);    font-size:var(--t-h3); line-height:1.3; letter-spacing:var(--ls-snug); font-weight:600; color:var(--fg-1); }
p, .p   { font-family:var(--font-body);    font-size:var(--t-body); line-height:1.65; color:var(--fg-2); font-weight:400; }
.lead   { font-family:var(--font-body);    font-size:var(--t-body-lg); line-height:1.6; color:var(--fg-2); }
.small  { font-family:var(--font-body);    font-size:var(--t-small); line-height:1.55; color:var(--fg-2); }

.display-italic { font-family:var(--font-display); font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.eyebrow, .label-mono { font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500; letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--accent); }
code, .code, .mono { font-family:var(--font-mono); font-size:0.78rem; line-height:1.8; }

/* === End tokens === */


* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg-1);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* === Atmospherics === */
.cc-grain {
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.035;
  background-image:url("assets/grain.svg"); background-size:160px;
  mix-blend-mode:overlay;
}
.cc-mesh {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--grad-mesh);
  filter:saturate(1.1);
}
.cc-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.45;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* === Nav (glass) === */
.cc-nav {
  position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:0.6rem 0.6rem 0.6rem 1.25rem;
  width:min(96%, 1200px);
  border-radius:var(--r-pill);
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  background:rgba(15,15,20,0.6);
  border:1px solid var(--border);
  box-shadow:var(--elev-glass);
}
.cc-nav-logo { display:flex; align-items:center; gap:0.7rem; }
.cc-nav-logo img { width:36px; height:36px; }
.cc-logo-text {
  font-family:var(--font-body); font-weight:600; font-size:0.875rem;
  letter-spacing:-0.01em;
}
.cc-logo-text em {
  font-family:var(--font-display); font-style:italic; font-weight:400;
  background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-left:0.25em;
}
.cc-nav-links { display:flex; gap:1.75rem; align-items:center; }
.cc-nav-link {
  font-size:0.8rem; font-weight:500; color:var(--fg-2);
  transition:color 0.2s var(--ease-out);
}
.cc-nav-link:hover { color:var(--fg-1); }
.cc-nav-cta {
  font-size:0.8rem; font-weight:500; padding:0.5rem 1.1rem;
  border-radius:var(--r-pill);
  background:var(--grad-button);
  color:#fff;
  border:none;
  transition:all 0.3s var(--ease-out);
  box-shadow:var(--elev-1);
  white-space:nowrap;
}
.cc-nav-cta:hover { transform:translateY(-1px); box-shadow:var(--elev-2); }

/* === Buttons === */
.cc-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-body); font-weight:500; font-size:0.9rem;
  padding:0.85rem 1.75rem; border-radius:var(--r-pill); cursor:pointer;
  transition:all 0.35s var(--ease-out); letter-spacing:0.01em; border:none;
  white-space:nowrap;
}
.cc-btn--primary { background:var(--grad-button); color:#fff; box-shadow:var(--elev-1); }
.cc-btn--primary:hover { transform:translateY(-2px); box-shadow:var(--elev-2); }
.cc-btn--ghost {
  border:1px solid var(--border); color:var(--fg-1); background:rgba(255,255,255,0.02);
  backdrop-filter:blur(8px);
}
.cc-btn--ghost:hover { border-color:rgba(255,107,107,0.5); color:var(--fg-1); background:rgba(255,107,107,0.04); }
.cc-btn--large { padding:1rem 2.25rem; font-size:0.95rem; }

/* === Hero === */
.cc-hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:9rem 2rem 4rem; overflow:hidden;
}
.cc-hero::before {
  content:''; position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:1100px; height:1100px;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
/* Aurora lines */
.cc-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,107,107,0.03) 50%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.cc-hero > * { position:relative; z-index:1; }

.cc-hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.7rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent);
  padding:0.5rem 1.1rem;
  border:1px solid rgba(255,107,107,0.25); border-radius:var(--r-pill);
  margin-bottom:2.5rem; background:rgba(255,107,107,0.04);
  backdrop-filter:blur(8px);
}
.cc-hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:cc-pulseDot 2s ease-in-out infinite; }

.cc-hero-title {
  font-family:var(--font-display); font-size:5rem;
  line-height:1.3; letter-spacing:-0.04em; margin-bottom:1.75rem;
  font-weight:400;
  max-width:1100px;
  display:block;
  white-space:nowrap;
}
.cc-title-line { display:block; }
.cc-title-italic {
  font-style:italic; background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.cc-hero-sub {
  max-width:560px; font-size:1.1rem; color:var(--fg-2); line-height:1.65; margin-bottom:2.5rem;
  font-weight:400;
}
.cc-hero-ctas { display:flex; gap:0.75rem; }

/* Hero metrics row */
.cc-hero-metrics {
  margin-top:5rem; display:flex; gap:0; align-items:stretch;
  border:1px solid var(--border); border-radius:var(--r-2xl);
  background:rgba(15,15,20,0.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  box-shadow:var(--elev-glass);
}
.cc-metric {
  flex:1; padding:1.5rem 2rem; text-align:left;
  border-right:1px solid var(--border);
}
.cc-metric:last-child { border-right:none; }
.cc-metric-value {
  font-family:var(--font-display); font-size:2rem; font-weight:400;
  letter-spacing:-0.02em; color:var(--fg-1); line-height:1;
}
.cc-metric-value em { font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cc-metric-label {
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--fg-3); margin-top:0.5rem;
}

/* === Glow divider === */
.cc-glow-divider { height:1px; max-width:1200px; margin:0 auto; background:var(--grad-divider); opacity:0.3; animation:cc-glowPulse 4s ease-in-out infinite; }

/* === Section header === */
.cc-section-header { text-align:center; margin-bottom:4rem; }
.cc-section-label {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.7rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.cc-section-label::before, .cc-section-label::after {
  content:''; width:24px; height:1px; background:var(--accent); opacity:0.4;
}
.cc-section-title { font-family:var(--font-display); font-size:var(--t-section); line-height:1.3; letter-spacing:-0.02em; font-weight:400; padding-bottom:0.15em; }
.cc-section-title em { font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* === Philosophy === */
.cc-philosophy { padding:8rem 2.5rem; max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.cc-section-grid { display:grid; grid-template-columns:220px 1fr; gap:4rem; margin-bottom:5rem; align-items:start; }
.cc-phil-label {
  font-family:var(--font-mono); font-size:0.7rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
  padding-top:0.7rem; opacity:0.85;
  border-top:1px solid var(--accent); display:inline-block;
  width:60px;
}
.cc-phil-heading { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.25rem); line-height:1.3; letter-spacing:-0.02em; margin-bottom:1.5rem; font-weight:400; padding-bottom:0.15em; }
.cc-phil-heading em { font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cc-phil-text { font-size:1.05rem; color:var(--fg-2); line-height:1.7; max-width:620px; }

.cc-values-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cc-value-card {
  padding:2rem; background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius:var(--r-xl);
  transition:all 0.4s var(--ease-out); position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
}
.cc-value-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--r-xl);
  background:linear-gradient(135deg, rgba(255,107,107,0.15), transparent 40%);
  opacity:0; transition:opacity 0.4s var(--ease-out); pointer-events:none;
}
.cc-value-card:hover { border-color:rgba(255,107,107,0.35); transform:translateY(-3px); }
.cc-value-card:hover::before { opacity:1; }
.cc-value-number {
  font-family:var(--font-mono); font-size:0.7rem; font-weight:600; color:var(--accent);
  letter-spacing:0.15em;
  display:flex; align-items:center; gap:0.4rem;
}
.cc-value-number::before { content:''; width:18px; height:1px; background:var(--accent); }
.cc-value-icon {
  width:40px; height:40px; border-radius:var(--r-md);
  background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.2);
  display:flex; align-items:center; justify-content:center;
  margin:1.25rem 0 1.25rem;
  color:var(--accent);
}
.cc-value-title { font-family:var(--font-display); font-size:1.5rem; font-weight:400; margin-bottom:0.5rem; letter-spacing:-0.02em; line-height:1.15; }
.cc-value-text { font-size:0.9rem; color:var(--fg-2); line-height:1.6; }

/* === Work / app showcase === */
.cc-work { padding:6rem 2.5rem 8rem; max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.cc-app-showcase { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.cc-app-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:600px; }
.cc-phone-frame {
  max-width:300px;
  border-radius:var(--r-2xl);
  overflow:hidden;
  position:relative; z-index:2;
  box-shadow:var(--elev-4);
  border:1px solid var(--surface);
}
.cc-phone-screenshot { width:100%; display:block; }
.cc-app-glow {
  position:absolute; width:500px; height:500px;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; filter:blur(30px);
  animation:cc-floatGlow 8s ease-in-out infinite;
}
/* Orbit ring */
.cc-orbit {
  position:absolute; width:480px; height:480px;
  border:1px dashed rgba(255,107,107,0.2);
  border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:0;
  animation:cc-spin 40s linear infinite;
}
.cc-orbit::before, .cc-orbit::after {
  content:''; position:absolute;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px var(--accent);
}
.cc-orbit::before { top:-4px; left:50%; transform:translateX(-50%); }
.cc-orbit::after { bottom:-4px; left:50%; transform:translateX(-50%); background:var(--accent-2); box-shadow:0 0 16px var(--accent-2); }

.cc-app-badge { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.8rem; font-weight:500; color:var(--success); margin-bottom:1.5rem; font-family:var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; }
.cc-badge-dot { width:8px; height:8px; background:var(--success); border-radius:50%; animation:cc-pulseDot 2s ease-in-out infinite; box-shadow:0 0 8px var(--success); }
.cc-app-name { font-family:var(--font-display); font-size:2.5rem; font-weight:400; line-height:1.35; letter-spacing:-0.02em; margin-bottom:2rem; padding-bottom:0.3em; }
.cc-app-name em { font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cc-app-desc { font-size:1rem; color:var(--fg-2); line-height:1.7; margin-bottom:2rem; max-width:480px; }

.cc-app-features { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2.5rem; }
.cc-app-features li {
  display:flex; align-items:flex-start; gap:0.75rem;
  padding:1rem 1.1rem;
  min-height:84px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:rgba(255,255,255,0.015);
  transition:all 0.3s var(--ease-out);
}
.cc-app-features li:hover { border-color:rgba(255,107,107,0.3); background:rgba(255,107,107,0.03); }
.cc-feature-icon {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:rgba(255,107,107,0.1); color:var(--accent);
  border:1px solid rgba(255,107,107,0.2);
}
.cc-app-features strong { display:block; font-weight:600; font-size:0.85rem; line-height:1.3; margin-bottom:0.35rem; color:var(--fg-1); }
.cc-app-features span { display:block; font-size:0.78rem; line-height:1.4; color:var(--fg-2); }
.cc-app-store-btn {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.75rem; background:#fff; color:#000; border-radius:var(--r-md);
  font-weight:600; font-size:0.9rem; transition:all 0.3s var(--ease-out);
}
.cc-app-store-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,255,255,0.12); }

/* === Products (multi-product showcase) === */
.cc-products { padding:6rem 2.5rem 8rem; max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.cc-product-list { display:flex; flex-direction:column; gap:8rem; margin-top:4rem; }
.cc-product { display:grid; grid-template-columns:1.05fr 1fr; gap:5rem; align-items:center; }
.cc-product-reverse { grid-template-columns:1fr 1.05fr; }
.cc-product-reverse .cc-product-visual { order:2; }
.cc-product-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:560px; }

.cc-product-meta { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; }
.cc-product-index { color:var(--fg-3); }
.cc-product-status { display:inline-flex; align-items:center; gap:0.5rem; padding:0.3rem 0.7rem; border-radius:999px; border:1px solid var(--border); }
.cc-status-live { color:var(--success); border-color:rgba(77,208,143,0.3); background:rgba(77,208,143,0.04); }
.cc-status-dev { color:#FFB36B; border-color:rgba(255,179,107,0.3); background:rgba(255,179,107,0.04); }
.cc-status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:cc-pulseDot 2s ease-in-out infinite; }

.cc-product-name { font-family:var(--font-display); font-size:3rem; font-weight:400; line-height:1; letter-spacing:-0.02em; margin-bottom:0.6rem; }
.cc-product-tagline { font-family:var(--font-display); font-size:1.5rem; font-style:italic; line-height:1.5; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1.5rem; }
.cc-product-desc { font-size:1rem; color:var(--fg-2); line-height:1.7; margin-bottom:1.75rem; max-width:520px; }
.cc-product-features { list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; padding:0; }
.cc-pfeat { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.85rem; border:1px solid var(--border); border-radius:999px; font-size:0.78rem; color:var(--fg-2); background:rgba(255,255,255,0.015); transition:all 0.3s var(--ease-out); }
.cc-pfeat:hover { border-color:rgba(255,107,107,0.3); color:var(--fg-1); }
.cc-pfeat-icon { display:inline-flex; color:var(--accent); }
.cc-product-cta { margin-top:0.5rem; }

/* Desktop frame for VCut */
.cc-desktop-frame {
  width:100%; max-width:620px; aspect-ratio:16/10;
  border-radius:var(--r-lg); overflow:hidden;
  background:#0A0A0B;
  border:1px solid var(--border);
  box-shadow:var(--elev-4);
  position:relative; z-index:2;
  display:flex; flex-direction:column;
}
.cc-desktop-chrome {
  display:flex; gap:6px; align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.cc-desktop-title {
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.cc-tl { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.15); }
.cc-tl:nth-child(1) { background:#FF6B6B; }
.cc-tl:nth-child(2) { background:#FFB36B; }
.cc-tl:nth-child(3) { background:#4DD08F; }
.cc-desktop-body { position:relative; flex:1; overflow:hidden; }
.cc-desktop-screenshot {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
  opacity:0; transition:opacity 0.5s var(--ease-out);
}
.cc-desktop-screenshot.is-active { opacity:1; }

/* VCut carousel container & controls */
.cc-vcut-carousel {
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  padding:1rem 0;
}
.cc-vcut-controls {
  display:flex; align-items:center; gap:1rem;
  position:relative; z-index:3;
  padding:0.5rem 0.75rem;
  background:rgba(10,10,11,0.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:999px;
  min-width:300px;
}
.cc-vcut-arrow {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--fg-2);
  cursor:pointer;
  transition:all 0.2s var(--ease-out);
}
.cc-vcut-arrow:hover { color:var(--accent); border-color:rgba(255,107,107,0.4); background:rgba(255,107,107,0.06); }
.cc-vcut-arrow:first-child svg { transform:rotate(180deg); }
.cc-vcut-phase-info { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.cc-vcut-phase-num { font-family:var(--font-mono); font-size:0.65rem; color:var(--fg-3); letter-spacing:0.14em; }
.cc-vcut-phase-label { font-size:0.85rem; font-weight:600; color:var(--fg-1); }
.cc-vcut-phase-sub { font-size:0.7rem; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cc-vcut-dots { display:flex; gap:8px; position:relative; z-index:3; }
.cc-vcut-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:none; cursor:pointer; padding:0;
  transition:all 0.3s var(--ease-out);
}
.cc-vcut-dot:hover { background:rgba(255,255,255,0.3); }
.cc-vcut-dot.is-active { background:var(--grad-button); width:20px; border-radius:3px; box-shadow:0 0 8px rgba(255,107,107,0.5); }

/* === Stack === */
.cc-stack { padding:6rem 2.5rem; max-width:1200px; margin:0 auto; position:relative; z-index:2; }
.cc-stack-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0.75rem; }
.cc-stack-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem;
  padding:1.25rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius:var(--r-md);
  font-weight:500; font-size:0.82rem; transition:all 0.3s var(--ease-out);
  position:relative; overflow:hidden;
}
.cc-stack-item::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--grad-button); opacity:0; transition:opacity 0.3s;
}
.cc-stack-item:hover { border-color:rgba(255,107,107,0.3); transform:translateY(-2px); }
.cc-stack-item:hover::after { opacity:1; }
.cc-stack-icon {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:rgba(255,107,107,0.06); border:1px solid var(--border);
  color:var(--accent);
}

/* === Contact === */
.cc-contact { padding:8rem 2.5rem; position:relative; z-index:2; }
.cc-contact-inner {
  max-width:760px; margin:0 auto; text-align:center;
  padding:4rem 2.5rem;
  border:1px solid var(--border); border-radius:var(--r-2xl);
  background:linear-gradient(180deg, rgba(255,107,107,0.04), rgba(255,107,107,0));
  backdrop-filter:blur(8px);
  position:relative; overflow:hidden;
}
.cc-contact-inner::before {
  content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%);
  width:120%; height:120%;
  background:radial-gradient(ellipse at top, var(--accent-glow), transparent 60%);
  pointer-events:none;
}
.cc-contact-inner > * { position:relative; }
.cc-contact-title { font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4rem); line-height:1.3; letter-spacing:-0.03em; margin-bottom:1.5rem; font-weight:400; }
.cc-contact-title span { display:block; }
.cc-contact-italic { font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cc-contact-text { font-size:1.05rem; color:var(--fg-2); line-height:1.7; margin-bottom:2.5rem; max-width:520px; margin-left:auto; margin-right:auto; }
.cc-contact-form-card {
  display:flex; flex-direction:column; gap:0.75rem;
  max-width:560px; margin:0 auto 1rem;
  padding:1rem;
  background:rgba(15,15,20,0.5);
  border:1px solid var(--border); border-radius:var(--r-lg);
  backdrop-filter:blur(12px);
  text-align:left;
}
.cc-contact-row { display:flex; gap:0.75rem; }
.cc-contact-row > * { flex:1; min-width:0; }
@media (max-width:520px) { .cc-contact-row { flex-direction:column; } }
.cc-contact-field {
  width:100%;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:0.75rem 1rem;
  font-family:var(--font-body); font-size:0.95rem; color:var(--fg-1);
  transition:border-color 0.15s, background 0.15s;
}
.cc-contact-field:focus {
  outline:none;
  border-color:var(--accent);
  background:rgba(0,0,0,0.5);
}
.cc-contact-field::placeholder { color:var(--fg-3); }
.cc-contact-textarea { resize:vertical; min-height:104px; line-height:1.55; }
.cc-contact-actions { display:flex; justify-content:flex-end; padding-top:0.25rem; }
.cc-contact-error {
  padding:0.6rem 0.9rem;
  background:rgba(255,107,107,0.08);
  border:1px solid rgba(255,107,107,0.3);
  border-radius:var(--r-md);
  color:var(--accent); font-size:0.85rem;
}
.cc-contact-thanks {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:1rem 2rem; background:rgba(93,214,143,0.08); border:1px solid rgba(93,214,143,0.3);
  border-radius:var(--r-pill); color:var(--success); font-size:0.95rem; margin-bottom:1.25rem;
}
.cc-contact-thanks strong { color:var(--fg-1); margin-left:4px; }
.cc-contact-mail { display:block; font-family:var(--font-mono); font-size:0.78rem; color:var(--fg-3); margin-top:1rem; letter-spacing:0.05em; }
.cc-contact-mail:hover { color:var(--accent); }

/* === Footer === */
.cc-footer { border-top:1px solid var(--border); padding:3rem 2.5rem; position:relative; z-index:2; }
.cc-footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.cc-footer-brand { display:flex; align-items:center; gap:0.75rem; }
.cc-footer-brand img { width:36px; height:36px; }
.cc-footer-company { font-weight:600; font-size:0.9rem; }
.cc-footer-tagline { font-family:var(--font-mono); font-size:0.7rem; color:var(--fg-3); letter-spacing:0.12em; text-transform:uppercase; margin-top:2px; }
.cc-footer-links { display:flex; gap:2rem; }
.cc-footer-links a { font-size:0.82rem; color:var(--fg-2); transition:color 0.3s; }
.cc-footer-links a:hover { color:var(--accent); }
.cc-footer-copy { width:100%; text-align:center; font-family:var(--font-mono); font-size:0.7rem; color:var(--fg-3); padding-top:2rem; border-top:1px solid var(--border); margin-top:1rem; letter-spacing:0.08em; }

/* === Animations === */
@keyframes cc-fadeUp { 0% { opacity:0; transform:translateY(28px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes cc-pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.55; transform:scale(0.85); } }
@keyframes cc-glowPulse { 0%,100% { opacity:0.2; } 50% { opacity:0.45; } }
@keyframes cc-floatGlow { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.15); } }
@keyframes cc-spin { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }

@media (max-width:900px) {
  .cc-nav { padding:0.5rem 0.5rem 0.5rem 1rem; }
  .cc-nav-links { display:none; }
  .cc-section-grid { grid-template-columns:1fr; gap:1.5rem; }
  .cc-values-row { grid-template-columns:1fr; }
  .cc-app-showcase { grid-template-columns:1fr; gap:3rem; }
  .cc-app-visual { order:-1; }
  .cc-product { grid-template-columns:1fr; gap:3rem; }
  .cc-product-reverse { grid-template-columns:1fr; }
  .cc-product-visual, .cc-product-reverse .cc-product-visual { order:-1; min-height:420px; }
  .cc-product-name { font-size:2.25rem; }
  .cc-product-tagline { font-size:1.2rem; }
  .cc-product-list { gap:5rem; }
  .cc-stack-grid { grid-template-columns:repeat(2,1fr); }
  .cc-app-features { grid-template-columns:1fr; }
  .cc-hero-metrics { flex-direction:column; }
  .cc-metric { border-right:none; border-bottom:1px solid var(--border); }
  .cc-metric:last-child { border-bottom:none; }
}