/* OneTicket Home Page Styles */

/***** Hero *****/
.ot-hero { position: relative; padding: clamp(4rem, 10vh, 6.5rem) 1.25rem 4rem; overflow: hidden; background: linear-gradient(125deg,#0f172a 0%,#1e3a8a 55%,#2563eb 100%); color:#fff; isolation:isolate; }
.ot-hero .hero-inner { max-width:880px; margin:0 auto; position:relative; z-index:2; }
.ot-hero h1.hero-title { margin:0 0 1rem; font-size:clamp(2.25rem,5vw,3.4rem); line-height:1.05; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.hero-inline-logo { width:58px; height:58px; flex:0 0 auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.logo-accent { background:linear-gradient(90deg,#60a5fa,#93c5fd); -webkit-background-clip:text; color:transparent; }
.ot-hero .tagline { font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:500; margin:0 0 .75rem; }
.ot-hero .sub { max-width:640px; margin:0 0 1.75rem; line-height:1.5; color:#e2e8f0; }
.cta { display:inline-block; padding:.85rem 1.35rem; font-weight:600; border-radius:8px; text-decoration:none; transition:.2s background,.2s box-shadow,.2s transform; cursor:pointer; font-size:.97rem; letter-spacing:.3px; }
.cta.primary { background:#fff; color:#1e3a8a; box-shadow:0 4px 14px -4px rgba(0,0,0,.35); }
.cta.primary:hover { background:#e2e8f0; transform:translateY(-2px); }
.cta.secondary { background:#1e3a8a; color:#fff; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); }
.cta.secondary:hover { background:#1d4ed8; }
.alt-note { margin-top:.75rem; font-size:.8rem; color:#bfdbfe; }
.hero-bg-shapes .blob { position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(90px); opacity:.28; }
.hero-bg-shapes .b1 { top:-120px; right:-120px; background:#60a5fa; }
.hero-bg-shapes .b2 { bottom:-180px; left:-120px; background:#1d4ed8; }
.hero-bg-shapes .grid-overlay { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:36px 36px; mix-blend-mode:overlay; opacity:.6; }

/***** Sections *****/
.ot-section { padding:3.5rem 1.25rem; }
.ot-section.features { background:var(--neutral-layer-1,#ffffff); }
.ot-section.how { background:var(--neutral-fill-layer-alt,#f1f5f9); }
.ot-section.contact { background:linear-gradient(135deg,#1d4ed8,#0f172a); color:#fff; text-align:center; }
.section-heading { max-width:780px; margin:0 auto 2.25rem; text-align:center; }
.section-heading h2 { margin:.25rem 0 .5rem; font-size:clamp(1.75rem,3vw,2.2rem); font-weight:650; }
.section-heading p { margin:0; color:#475569; }
.ot-section.contact h2 { font-size:clamp(1.9rem,3.2vw,2.4rem); }
.ot-section.contact p { color:#cbd5e1; max-width:680px; margin:.75rem auto 2rem; }

/***** Feature Grid *****/
.feature-grid { --col:repeat(auto-fit,minmax(220px,1fr)); display:grid; grid-template-columns:var(--col); gap:1.5rem; max-width:1100px; margin:0 auto; }
.feature-card { background:linear-gradient(140deg,#ffffff,#f1f5f9); border:1px solid #e2e8f0; padding:1.25rem 1.15rem 1.4rem; border-radius:14px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.65rem; box-shadow:0 4px 12px -6px rgba(15,23,42,.18); transition:.25s box-shadow,.25s transform; }
.feature-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(37,99,235,.18),transparent 60%); opacity:.75; }
.feature-card:hover { box-shadow:0 10px 30px -8px rgba(15,23,42,.35); transform:translateY(-4px); }
.feature-card h3 { margin:.25rem 0 0; font-size:1.05rem; font-weight:600; letter-spacing:.3px; }
.feature-card p { margin:0; font-size:.87rem; line-height:1.45; color:#475569; }
.icon-circle { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#1e40af); color:#fff; font-size:1.15rem; box-shadow:0 6px 14px -6px rgba(37,99,235,.55); }

/***** Steps *****/
.steps { list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset: st; }
.steps li { background:#fff; border:1px solid #e2e8f0; padding:1.1rem 1rem 1.3rem; border-radius:12px; position:relative; box-shadow:0 3px 8px -4px rgba(15,23,42,.18); }
.steps h4 { margin:.15rem 0 .5rem; font-size:.95rem; font-weight:600; letter-spacing:.4px; color:#1e3a8a; }
.steps p { margin:0; font-size:.8rem; line-height:1.4; color:#475569; }

/***** Contact *****/
.contact-inner { max-width:760px; margin:0 auto; }

/***** Footer *****/
.ot-footer { background:#0f172a; color:#94a3b8; padding:3rem 1.5rem 3.5rem; font-size:.8rem; }
.foot-cols { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:1100px; margin:0 auto; }
.foot-brand { font-size:1.15rem; font-weight:700; background:linear-gradient(90deg,#60a5fa,#2563eb); -webkit-background-clip:text; color:transparent; margin-bottom:.65rem; }
.ot-footer h5 { margin:.2rem 0 .6rem; color:#f1f5f9; font-size:.75rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; }
.ot-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ot-footer a { color:#cbd5e1; text-decoration:none; font-size:.78rem; }
.ot-footer a:hover { color:#fff; text-decoration:underline; }
.foot-small { margin:.25rem 0 .4rem; line-height:1.4; }

/***** Responsive tweaks *****/
@media (max-width:680px){
  .feature-card { padding:1.1rem 1rem 1.25rem; }
  .ot-footer { padding:2.75rem 1.1rem 3rem; }
}