/* InnerDevTech — landing page layout */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(7,11,24,.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-color: var(--line); background: rgba(7,11,24,.9); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.brand .logo { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { color: var(--muted); font-weight: 550; font-size: .95rem; position: relative; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--grad); transition: width .25s var(--ease); }
.nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { padding: 86px 0 70px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.3rem); margin: 22px 0 20px; }
.hero p.lead { font-size: 1.18rem; color: var(--muted); max-width: 540px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.trust { display: flex; gap: 28px; margin-top: 38px; flex-wrap: wrap; }
.trust .t { display: flex; flex-direction: column; }
.trust .t b { font-size: 1.7rem; font-weight: 800; } .trust .t span { color: var(--faint); font-size: .82rem; }

/* Hero dashboard card */
.dash {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow); padding: 22px; position: relative; overflow: hidden;
}
.dash::before { content:""; position:absolute; inset:0; background: var(--grad-soft); opacity:.5; pointer-events:none; }
.dash-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.dash-top .tt { font-size: .82rem; color: var(--muted); font-weight: 600; }
.dots { display: flex; gap: 6px; } .dots i { width: 9px; height: 9px; border-radius: 50%; display:block; }
.dots i:nth-child(1){background:#ff5f57} .dots i:nth-child(2){background:#febc2e} .dots i:nth-child(3){background:#28c840}
.kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0; position: relative; }
.kpi { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.kpi .lab { font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.kpi .val { font-size: 1.45rem; font-weight: 800; margin-top: 2px; }
.kpi .chg { font-size: .72rem; font-weight: 700; } .chg.up{color:var(--good)} .chg.down{color:#ff7a7a}
.dash-chart { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 16px; padding: 14px; position: relative; }
.dash-chart .ch-h { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--muted); margin-bottom:8px; }

/* floating badge */
.float-badge {
  position: absolute; right: -14px; top: 30%;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--shadow); display:flex; align-items:center; gap:10px;
  animation: floaty 4s ease-in-out infinite; z-index: 3;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-badge .rg { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--grad); color:#05122a; font-weight:800; }
.float-badge b { font-size: .9rem; } .float-badge span { font-size:.72rem; color:var(--faint); display:block; }

/* ---------- Logos / industries ---------- */
.marq { border-block: 1px solid var(--line); padding: 26px 0; overflow: hidden; }
.marq .lab { text-align:center; color:var(--faint); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }
.marq-track { display:flex; gap:60px; width:max-content; animation: scroll 26s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq-track .it { display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; font-size:1.05rem; white-space:nowrap; opacity:.8; }
.marq-track .it svg { color: var(--accent-2); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Solutions ---------- */
.sol-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.sol { transition: transform .3s var(--ease), border-color .3s; position: relative; overflow:hidden; }
.sol:hover { transform: translateY(-6px); border-color: var(--accent); }
.sol .ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background: var(--grad-soft); border:1px solid var(--line); margin-bottom:18px; color:var(--accent-2); }
.sol h3 { font-size: 1.3rem; margin-bottom: 10px; }
.sol p { color: var(--muted); font-size: .96rem; }
.sol ul { list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.sol li { display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--muted); }
.sol li::before { content:""; width:16px;height:16px;border-radius:50%; background:rgba(46,230,166,.15); border:1px solid var(--good); flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232ee6a6' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }

/* ---------- Features (animated charts) ---------- */
.feat-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.feat { position:relative; overflow:hidden; }
.feat.span2 { grid-column: span 2; display:grid; grid-template-columns: 1fr 1.1fr; gap:30px; align-items:center; }
.feat h3 { font-size:1.25rem; margin-bottom:10px; }
.feat p { color:var(--muted); font-size:.95rem; }
.chart-box { background: rgba(255,255,255,.02); border:1px solid var(--line); border-radius:16px; padding:18px; }
.chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.chart-head .ttl { font-size:.82rem; color:var(--muted); font-weight:600; }
.chart-head .big { font-size:1.5rem; font-weight:800; }
.legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.legend i { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); }
.legend i b { width:10px; height:10px; border-radius:3px; display:block; }

/* process timeline */
.process { display:grid; grid-template-columns: repeat(5,1fr); gap:0; counter-reset: step; margin-top:20px; }
.step { position:relative; padding: 26px 18px; text-align:center; }
.step::before { counter-increment: step; content: "0" counter(step); position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:40px; height:40px; border-radius:50%; background:var(--surface-2); border:1px solid var(--accent); color:var(--accent-2);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; box-shadow:0 0 0 6px var(--bg); }
.process .line { grid-column:1/-1; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); margin-top:6px; border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform 1.4s var(--ease); }
.process.in .line { transform: scaleX(1); }
.step h4 { margin: 18px 0 6px; font-size:1.02rem; }
.step p { font-size:.83rem; color:var(--muted); }

/* ---------- Pricing ---------- */
.toggle { display:inline-flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px; margin-top:20px; }
.toggle button { border:none; background:none; color:var(--muted); font-weight:650; padding:8px 20px; border-radius:999px; cursor:pointer; font-size:.9rem; transition: all .25s; }
.toggle button.active { background: var(--grad); color:#05122a; }
.toggle .save { font-size:.72rem; color:var(--good); font-weight:700; }
.price-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:40px; }
.plan { display:flex; flex-direction:column; transition: transform .3s var(--ease), border-color .3s; }
.plan:hover { transform: translateY(-6px); }
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-glow); position:relative; }
.plan.featured::after { content:"Most Popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#05122a; font-size:.7rem; font-weight:800; padding:5px 14px; border-radius:999px; letter-spacing:.04em; }
.plan .pname { font-size:.95rem; font-weight:700; color:var(--accent-2); text-transform:uppercase; letter-spacing:.08em; }
.plan .pprice { font-size:2.4rem; font-weight:800; margin:14px 0 2px; }
.plan .pprice small { font-size:.9rem; color:var(--faint); font-weight:500; }
.plan .pdesc { color:var(--muted); font-size:.86rem; min-height:38px; }
.plan ul { list-style:none; margin:20px 0; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan li { display:flex; gap:10px; font-size:.9rem; color:var(--muted); }
.plan li svg { color:var(--good); flex:none; }
.plan .annual-price { display:none; } .price-grid[data-cycle="annual"] .monthly-price { display:none; }
.price-grid[data-cycle="annual"] .annual-price { display:inline; }

/* ---------- CTA / contact ---------- */
.cta-band { text-align:center; }
.cta-card { background: var(--grad); border-radius: var(--radius-lg); padding: 60px 40px; color:#05122a; position:relative; overflow:hidden; }
.cta-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.3), transparent 50%); }
.cta-card h2 { font-size: clamp(1.8rem,4vw,2.8rem); position:relative; color:#05122a; }
.cta-card p { max-width:520px; margin:14px auto 26px; position:relative; color:#0a1f3d; font-weight:500; }
.cta-card .btn-primary { background:#05122a; color:#fff; }
.cta-card .btn-ghost { border-color:rgba(5,18,42,.3); color:#05122a; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); padding: 60px 0 34px; margin-top:40px; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:36px; }
.foot-grid h5 { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-bottom:16px; }
.foot-grid a { display:block; color:var(--muted); font-size:.92rem; padding:5px 0; transition:color .2s; }
.foot-grid a:hover { color:var(--accent-2); }
.foot-brand p { color:var(--muted); font-size:.92rem; margin:14px 0; max-width:300px; }
.socials { display:flex; gap:12px; }
.socials a { width:40px; height:40px; border:1px solid var(--line); border-radius:11px; display:grid; place-items:center; color:var(--muted); transition: all .25s; }
.socials a:hover { color:var(--accent-2); border-color:var(--accent-2); transform:translateY(-3px); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); color:var(--faint); font-size:.85rem; flex-wrap:wrap; gap:12px; }

/* counter draw animation for charts */
.draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.in .draw { animation: draw 2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bar-rect { transform: scaleY(0); transform-origin: bottom; }
.in .bar-rect { animation: grow .9s var(--ease) forwards; }
@keyframes grow { to { transform: scaleY(1); } }
.area-fill { opacity:0; } .in .area-fill { animation: fade 1.4s ease forwards .4s; }
@keyframes fade { to { opacity:1; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sol-grid, .feat-grid, .price-grid, .foot-grid { grid-template-columns: 1fr; }
  .feat.span2 { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; gap:30px 12px; }
  .nav-links, .nav-cta .btn-ghost { display:none; }
  .menu-btn { display:block; }
  .nav-links.open { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; background:var(--bg-2); padding:20px 24px; border-bottom:1px solid var(--line); }
}