/* =====================================================
   THE FOUNDERS HOUSE — Landing Redesign (index.html only)
   AngelList / Wellfound inspired · editorial tech
   Cream canvas · pitch-black type · coral accent
   Loaded AFTER style.css to override scoped tokens.
   ===================================================== */

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

/* ---------- 1. Re-tokenized palette ---------- */
:root {
  /* Canvas */
  --bg: #FAF9F4;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F2F0E8;
  --bg-card: #FFFFFF;

  /* Text */
  --text-primary: #0A0A0A;
  --text-secondary: #52514D;
  --text-tertiary: #8A8982;
  --text-placeholder: #B8B6AD;

  /* Borders */
  --border: #E8E6DD;
  --border-light: #F0EEE5;
  --border-dark: #D5D2C6;

  /* Brand → black (primary) */
  --brand: #0A0A0A;
  --brand-50:  #F5F5F4;
  --brand-100: #E8E8E6;
  --brand-200: #D0D0CC;
  --brand-300: #A8A8A2;
  --brand-400: #6B6B66;
  --brand-500: #1A1A1A;
  --brand-600: #0A0A0A;
  --brand-700: #000000;
  --brand-800: #000000;
  --brand-900: #000000;

  /* Accent → signature coral (AngelList) */
  --accent: #FF5A4E;
  --accent-soft: #FFF0EE;
  --accent-glow: #FF5A4E;
  --accent-lavender: #0A0A0A;
  --accent-lavender-soft: #0A0A0A;

  /* Status */
  --success-500: #00C853;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;

  /* Shadows — crisp & modern */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.05);
  --shadow-md: 0 8px 24px -8px rgba(10,10,10,0.10);
  --shadow-lg: 0 24px 48px -16px rgba(10,10,10,0.14);
  --shadow-xl: 0 40px 80px -24px rgba(10,10,10,0.18);
}

/* ---------- 2. Base ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
}

/* Grain texture on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Typography — editorial scale, capped for readability */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; font-family: var(--font) !important; }
h1 {
  font-size: clamp(42px, 5.6vw, 88px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
}
h2 {
  font-size: clamp(32px, 4.2vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.0 !important;
}
h3 { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
h4 { font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; }
h5 { font-size: 16px !important; font-weight: 600 !important; }

/* ---------- 3. Container / layout — edge-to-edge ---------- */
.container { max-width: 100% !important; padding: 0 64px !important; }
@media (max-width: 1440px) { .container { padding: 0 56px !important; } }
@media (max-width: 1200px) { .container { padding: 0 44px !important; } }
@media (max-width: 1024px) { .container { padding: 0 32px !important; } }
@media (max-width: 768px)  { .container { padding: 0 22px !important; } }
@media (max-width: 480px)  { .container { padding: 0 16px !important; } }

/* ---------- 4. Buttons ---------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
}
.btn-primary {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.08), 0 10px 24px -12px rgba(10,10,10,0.5) !important;
}
.btn-primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 0 rgba(255,90,78,0.15), 0 18px 36px -14px rgba(255,90,78,0.6) !important;
}
.btn-secondary {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.06) !important;
}
.btn-secondary:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}
.btn-ghost {
  color: #0A0A0A !important;
  background: transparent !important;
}
.btn-ghost:hover {
  background: rgba(10,10,10,0.06) !important;
  color: #0A0A0A !important;
}
.btn-lg { padding: 16px 30px !important; font-size: 15px !important; }
.btn-sm { padding: 8px 16px !important; font-size: 13px !important; }

/* ---------- 5. Navbar ---------- */
.navbar {
  background: rgba(250, 249, 244, 0.75) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent !important;
  height: 76px !important;
}
.navbar.scrolled {
  background: rgba(250, 249, 244, 0.92) !important;
  border-bottom-color: var(--border) !important;
}
.nav-logo {
  color: #0A0A0A !important;
  background: #0A0A0A !important;
  border: 1.5px solid #0A0A0A !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.08), 0 12px 28px -14px rgba(10,10,10,0.35) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.nav-logo .nav-logo-text-wrap { color: #FFFFFF !important; }
.nav-logo:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 0 rgba(255,90,78,0.25), 0 14px 30px -12px rgba(255,90,78,0.55) !important;
}
.nav-links {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(10,10,10,0.03), 0 8px 24px -12px rgba(10,10,10,0.08) !important;
  backdrop-filter: none !important;
}
.nav-links a {
  color: #0A0A0A !important;
  font-weight: 600 !important;
}
.nav-links a:hover,
.nav-links a.active {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-investor-btn {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid rgba(255, 90, 78, 0.25) !important;
  font-weight: 600 !important;
}
.nav-investor-btn:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}
.nav-hamburger { color: #0A0A0A !important; }
@media (max-width: 900px) {
  .nav-links.open {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
  }
}

/* ---------- 6. Hero ---------- */
.hero { padding: clamp(110px, 14vw, 160px) 0 clamp(72px, 10vw, 120px) !important; }
.hero::before { display: none !important; }
.hero-grid-overlay {
  background-image:
    linear-gradient(rgba(10,10,10,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.06) 1px, transparent 1px) !important;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 75%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 20%, transparent 75%) !important;
}
.hero-orb { opacity: 0.45 !important; }
.hero-orb.orb-1 {
  background: radial-gradient(circle at 30% 30%, rgba(255,90,78,0.35), rgba(255,90,78,0.08) 45%, transparent 72%) !important;
}
.hero-orb.orb-2 {
  background: radial-gradient(circle at 60% 40%, rgba(255,200,80,0.28), rgba(255,160,60,0.08) 45%, transparent 72%) !important;
}
.hero-content {
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(40px, 5vw, 72px) !important;
  align-items: center !important;
}
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr !important; gap: 48px !important; }
}
.hero-eyebrow {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: #0A0A0A !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 6px rgba(10,10,10,0.04) !important;
}
.hero-eyebrow-dot {
  background: var(--success-500) !important;
  box-shadow: 0 0 0 4px rgba(0,200,83,0.15) !important;
}
.hero h1 {
  color: #0A0A0A !important;
}
/* Make the last word(s) pop with a serif italic — editorial touch */
.hero h1::first-letter { color: #0A0A0A; }
.hero-description {
  color: var(--text-secondary) !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 400 !important;
  max-width: 560px !important;
  line-height: 1.55 !important;
}

/* ---------- 7. Hero Demo Carousel ---------- */
.hero-card-preview {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 2px 0 rgba(10,10,10,0.03),
    0 30px 60px -20px rgba(10,10,10,0.22),
    0 14px 28px -14px rgba(10,10,10,0.12) !important;
  backdrop-filter: none !important;
  border-radius: 24px !important;
  padding: 26px !important;
}
.hero-card-header h4 { color: #0A0A0A !important; }
.hero-card-header p { color: var(--text-tertiary) !important; }
.hero-card-body { color: var(--text-secondary) !important; }
.hero-card-footer {
  border-top: 1px solid var(--border) !important;
}
.hero-card-meta { color: var(--text-tertiary) !important; }

.demo-tabs {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(10,10,10,0.04) !important;
  backdrop-filter: none !important;
}
.demo-tab { color: var(--text-secondary) !important; }
.demo-tab:hover { color: #0A0A0A !important; }
.demo-tab.active {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.1), 0 8px 20px -6px rgba(10,10,10,0.4) !important;
}
.demo-dot { background: rgba(10,10,10,0.12) !important; }
.demo-dot:hover { background: rgba(10,10,10,0.25) !important; }
.demo-dot.active {
  background: #0A0A0A !important;
  box-shadow: 0 2px 6px rgba(10,10,10,0.25) !important;
}
.demo-hint {
  background: #FFFFFF !important;
  border: 1px dashed var(--border-dark) !important;
  color: var(--text-secondary) !important;
}
.demo-hint svg { color: var(--accent) !important; }

.featured-badge {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(255,90,78,0.45) !important;
}

/* ---------- 8. Tags ---------- */
.tag {
  background: #F4F2EB !important;
  color: #0A0A0A !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
}
.tag:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}

/* ---------- 9. Cards & Sections ---------- */
.card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(10,10,10,0.03), 0 2px 8px rgba(10,10,10,0.03) !important;
}
.card:hover {
  background: #FFFFFF !important;
  border-color: #0A0A0A !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.05), 0 24px 48px -16px rgba(10,10,10,0.18) !important;
}

.section { padding: clamp(72px, 10vw, 120px) 0 !important; }
#for-whom { background: var(--bg-tertiary) !important; }
#model { background: var(--bg-tertiary) !important; }
.proof-section { background: var(--bg-secondary) !important; }

.section-header { max-width: 820px !important; }
.section-eyebrow {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
}
.section-header p {
  color: var(--text-secondary) !important;
  font-size: 21px !important;
}

/* ---------- 10. Features ---------- */
.features-grid { gap: 20px !important; }
.feature-card {
  padding: 36px 30px !important;
  position: relative;
}
.feature-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(255, 90, 78, 0.2) !important;
  width: 52px !important; height: 52px !important;
  border-radius: 14px !important;
}
.feature-icon svg { stroke: var(--accent) !important; }
.feature-card h4 { font-size: 19px !important; color: #0A0A0A !important; }
.feature-card p { color: var(--text-secondary) !important; font-size: 15px !important; }

/* ---------- 11. Roles ---------- */
.roles-grid { gap: 20px !important; }
.role-card { padding: 40px 32px !important; }
.role-card h3 { color: #0A0A0A !important; font-size: 24px !important; }
.role-card p { color: var(--text-secondary) !important; font-size: 15px !important; }
.role-card-icon,
.role-card:nth-child(1) .role-card-icon {
  background: var(--accent-soft) !important;
  border: 1px solid rgba(255, 90, 78, 0.22) !important;
  width: 56px !important; height: 56px !important;
  border-radius: 16px !important;
}
.role-card-icon svg { stroke: var(--accent) !important; }
.role-card:nth-child(2) .role-card-icon {
  background: #EFF6FF !important;
  border-color: rgba(46,144,250,0.22) !important;
}
.role-card:nth-child(2) .role-card-icon svg { stroke: #2E90FA !important; }
.role-card:nth-child(3) .role-card-icon {
  background: #FEFAE6 !important;
  border-color: rgba(247,144,9,0.22) !important;
}
.role-card:nth-child(3) .role-card-icon svg { stroke: #F79009 !important; }
.role-card-feature { color: var(--text-secondary) !important; }
.role-card-feature svg { color: var(--accent) !important; }

/* ---------- 12. Testimonials ---------- */
.testimonial { padding: 32px !important; }
.testimonial-text {
  color: #0A0A0A !important;
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.01em !important;
}
.testimonial-name { color: #0A0A0A !important; font-weight: 600 !important; }
.testimonial-role { color: var(--text-tertiary) !important; }

/* ---------- 13. Model Section ---------- */
.model-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(10,10,10,0.03), 0 2px 8px rgba(10,10,10,0.03) !important;
}
.model-card:hover {
  border-color: #0A0A0A !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.05), 0 24px 48px -16px rgba(10,10,10,0.18) !important;
}
.model-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(255,90,78,0.22) !important;
}
.model-icon svg { stroke: var(--accent) !important; }
.model-card h4 { color: #0A0A0A !important; }
.model-card p { color: var(--text-secondary) !important; }

.model-example {
  background: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  color: #FFFFFF !important;
  backdrop-filter: none !important;
  box-shadow: 0 30px 60px -20px rgba(10,10,10,0.35) !important;
}
.model-example-label { color: var(--accent) !important; }
.model-example-grid span { color: rgba(255,255,255,0.6) !important; }
.model-example-grid strong { color: #FFFFFF !important; }
.model-example-grid .arrow { color: var(--accent) !important; }

/* Investor Apply Card */
.investor-apply-card {
  background: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  color: #FFFFFF !important;
  backdrop-filter: none !important;
  box-shadow: 0 40px 80px -24px rgba(10,10,10,0.4) !important;
}
.investor-apply-card::before {
  background: radial-gradient(circle, rgba(255,90,78,0.28) 0%, transparent 65%) !important;
}
.investor-apply-card::after {
  background: radial-gradient(circle, rgba(255,200,80,0.16) 0%, transparent 65%) !important;
}
.investor-apply-badge {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(255,90,78,0.45) !important;
}
.investor-apply-card h3 { color: #FFFFFF !important; font-size: 44px !important; }
.investor-apply-card > p { color: rgba(255,255,255,0.72) !important; font-size: 16px !important; }
.ip-row {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.ip-row:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,90,78,0.4) !important;
}
.ip-icon {
  background: rgba(255,90,78,0.15) !important;
  border: 1px solid rgba(255,90,78,0.35) !important;
  color: var(--accent) !important;
}
.ip-row strong { color: #FFFFFF !important; }
.ip-row span { color: rgba(255,255,255,0.6) !important; }

/* Dark card overrides for buttons inside investor-apply */
.investor-apply-card .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255,90,78,0.4), 0 12px 32px -10px rgba(255,90,78,0.55) !important;
}
.investor-apply-card .btn-primary:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-color: #FFFFFF !important;
}
.investor-apply-card .btn-secondary {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.investor-apply-card .btn-secondary:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-color: #FFFFFF !important;
}

/* ---------- 14. CTA ---------- */
.cta-section { padding: 120px 0 !important; }
.cta-box {
  background: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  color: #FFFFFF !important;
  backdrop-filter: none !important;
  border-radius: 32px !important;
  padding: 100px 40px !important;
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,90,78,0.22) 0%, transparent 60%);
  pointer-events: none;
}
.cta-box::after {
  content: '';
  position: absolute;
  bottom: -40%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,200,80,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cta-box h2 {
  color: #FFFFFF !important;
  position: relative;
  font-size: clamp(44px, 6vw, 84px) !important;
}
.cta-box p {
  color: rgba(255,255,255,0.72) !important;
  position: relative;
}
.cta-box .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
  position: relative;
  box-shadow: 0 4px 14px rgba(255,90,78,0.4), 0 14px 36px -10px rgba(255,90,78,0.6) !important;
}
.cta-box .btn-primary:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-color: #FFFFFF !important;
}

/* ---------- 15. Footer ---------- */
.footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg) !important;
}
.footer-copy { color: var(--text-tertiary) !important; }
.footer-links a { color: var(--text-tertiary) !important; }
.footer-links a:hover { color: #0A0A0A !important; }

/* ---------- 16. Cookie Banner ---------- */
.cookie-banner {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 48px -16px rgba(10,10,10,0.18) !important;
  backdrop-filter: none !important;
}
.cookie-banner p { color: var(--text-secondary) !important; }
.cookie-banner a { color: var(--accent) !important; }
.cookie-banner .btn-ghost {
  color: var(--text-secondary) !important;
}
.cookie-banner .btn-primary {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}

/* ---------- 17. Responsive breakpoints ---------- */
/* Laptop 1024–1280 — tighten container */
@media (max-width: 1280px) {
  .features-grid,
  .roles-grid,
  .model-grid,
  .testimonial-grid { gap: 16px !important; }
}

/* Tablet ≤ 1024 */
@media (max-width: 1024px) {
  .hero-visual { max-width: 560px; margin: 0 auto; }
  .features-grid,
  .roles-grid,
  .model-grid,
  .testimonial-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .investor-perks { grid-template-columns: 1fr !important; }
}

/* Mobile ≤ 768 */
@media (max-width: 768px) {
  .section { padding: 72px 0 !important; }
  .cta-section { padding: 72px 0 !important; }
  .cta-box { padding: 64px 24px !important; border-radius: 24px !important; }
  .investor-apply-card { padding: 36px 22px !important; }
  .investor-apply-card h3 { font-size: 26px !important; }
  .features-grid,
  .roles-grid,
  .model-grid,
  .testimonial-grid { grid-template-columns: 1fr !important; }
  .testimonial-text { font-size: 19px !important; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 140px; }
  .footer-content { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 14px !important; }
}

/* Small mobile ≤ 480 */
@media (max-width: 480px) {
  .hero h1 { letter-spacing: -0.035em !important; }
  .hero-description { font-size: 16px !important; }
  .hero-eyebrow { font-size: 12px !important; padding: 6px 14px 6px 10px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .cta-box { padding: 52px 20px !important; }
  .investor-apply-card { padding: 32px 18px !important; }
  .investor-apply-card h3 { font-size: 23px !important; }
  .investor-apply-actions { flex-direction: column; }
  .investor-apply-actions .btn { width: 100%; }
  .hero-card-preview { padding: 20px !important; border-radius: 18px !important; }
  .featured-badge { top: 12px !important; right: 12px !important; }
  .model-example-grid { flex-direction: column !important; gap: 14px !important; }
  .model-example-grid .arrow { transform: rotate(90deg); }
}