:root{
  /* Dark “neo” theme */
  --bg: #0a0e14;
  --bg-2:#0d121b;
  --panel:#0f1522;
  --text: #e8edf7;
  --muted: #9aa3b2;
  --line: #212a3a;
  --brand: #7cc9ff;
  --brand-2: #9b8cff;
  --accent: #18e1b9;
  --surface: #0d121b;
  --surface-2: #0b1018;
  --success: #21d4a3;
  --glow: 0 0 20px rgba(124,201,255,.25), 0 0 40px rgba(155,140,255,.15);
  --shadow: 0 10px 28px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

a {color: var(--accent); text-decoration: none; outline: none}

/* Add top padding to avoid content hiding under fixed header + sticky title */
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--text); 
background: radial-gradient(1200px 600px at 10% -10%, rgba(124, 201, 255, .08), transparent 60%),
              radial-gradient(1000px 500px at 90% 10%, rgba(155, 140, 255, .08), transparent 55%),
              var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  line-height: 1.6;
  padding-top: 100px; /* ~56px header + 44px sticky-title */
}

/* Utilities */
.container{ width: min(1120px, 92%); margin-inline: auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.gradient-text{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.btn{
  display:inline-block; padding:.9rem 1.1rem; border-radius: .8rem;
  background: linear-gradient(180deg, #1a2a48, #142036);
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  border:1px solid #243250;
  box-shadow: var(--glow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-2px) scale(1.01); box-shadow: 0 0 24px rgba(124,201,255,.35); }
.btn:active{ transform: translateY(0); }
.btn--ghost{
  background: transparent;
  color: var(--brand);
  border:1px solid color-mix(in oklab, var(--brand) 55%, #223);
  box-shadow:none;
}
.btn--sm{ padding:.55rem .8rem; font-size:.95rem; }
.btn--block{ display:block; text-align:center; width:100%; }

/* Header (fixed, always visible) */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(10,14,20,.6); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header[data-shadow="1"]{ box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.25px; }
.brand img{ filter: drop-shadow(0 2px 8px rgba(124,201,255,.4)); aspect-ratio: 16 / 4; max-height: 35px; width: auto;}

.nav__toggle{ display:none; background:none; border:0; }
.nav__burger, .nav__burger::before, .nav__burger::after{
  content:""; display:block; width:22px; height:2px; background:var(--text); border-radius:1px; position:relative;
}
.nav__burger::before{ position:absolute; top:-6px; }
.nav__burger::after{ position:absolute; top:6px; }
.nav__list{ display:flex; gap:.6rem; align-items:center; list-style:none; padding:0; margin:0; }
.nav__list a{
  color:var(--muted); text-decoration:none; padding:.5rem .6rem; border-radius:.6rem;
  transition: background .2s ease, color .2s ease;
}
.nav__list a:hover, .nav__list a.is-active{
  color:#fff; background: color-mix(in oklab, var(--panel) 70%, black 30%);
  box-shadow: inset 0 0 0 1px #1f2a40;
}

/* Sticky Title */
.sticky-title{
  position: sticky; top:56px; z-index: 90; height:44px; display:flex; align-items:center; border-bottom:1px solid var(--line);
  background: linear-gradient(rgba(10,14,20,.9), rgba(10,14,20,.7));
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.sticky-title__inner{
  width:min(1120px,92%); margin-inline:auto; font-weight:800; letter-spacing:.2px;
  color:color-mix(in oklab, var(--brand) 70%, #fff 30%);
  opacity:1; transform: translateY(0); transition: opacity .25s ease, transform .25s ease;
}
.sticky-title__inner.is-hidden{ opacity:0; transform: translateY(-6px); }

/* Hero */
.hero{
  padding: 4.5rem 0 2.2rem; /* slightly tightened to accommodate fixed header */
  background:
    radial-gradient(1200px 500px at 10% -30%, rgba(124,201,255,.12), transparent 60%),
    radial-gradient(1000px 380px at 90% -10%, rgba(155,140,255,.12), transparent 60%);
}
.hero__grid{ display:grid; gap:2.2rem; grid-template-columns: 1.15fr .85fr; align-items: center; }
/* Lead line bigger as requested */
.lead{ color:var(--muted); font-size:1.35rem; line-height:1.35; }
.hero__copy h1{ font-size: clamp(2rem, 2.4vw + 1.2rem, 3.2rem); line-height:1.2; margin:.2rem 0 .6rem; }
.hero__actions{ display:flex; gap:.8rem; margin-top:1.1rem; }

/* Larger, centered, animated hero description */
.hero__desc{
  margin-top:1.6rem;                /* more space before paragraph */
  margin-bottom: 2.2rem;   /* Adds space below paragraph */
  color:var(--muted);
  line-height:1.65;
  text-align: justify;              /* justify both edges */
  text-justify: inter-word;         /* better word spacing for justification */
  hyphens: auto;                    /* allow soft hyphenation (improves look on narrow widths) */
  margin-left:auto; margin-right:auto;
  font-size: 1.08rem;               /* bigger font */
}

/* Right panel card */
.hero__panel{ display:flex; justify-content:center; }
.panel-card{
  width:100%; max-width:460px; background: linear-gradient(180deg, #10192e, #0e1729);
  color:#eaf1ff; border-radius: 1rem; padding:1.1rem 1.2rem; box-shadow: var(--shadow), var(--glow); border:1px solid #1e2a45;
}
.panel-card h3{ margin:.6rem 0 1rem; }
.panel-card ol{ margin:0; padding-left:1.2rem; color:var(--muted); }
.panel-card li{ margin:.35rem 0; }
.panel-img{
  width:100%; height:auto; border-radius:.8rem; border:1px solid #22304b; display:block; box-shadow: var(--glow);
}

/* Hero highlights placed after grid */
.hero__highlights{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.8rem; margin-top:1.2rem;
}
.highlight{
  padding: .9rem; border-radius:.9rem;
  background: linear-gradient(180deg, #10182c, #0e1626);
  border:1px solid #1c2538; box-shadow: var(--shadow);
}
.highlight h4{ margin:.2rem 0 .35rem; font-size:1.02rem; color:var(--brand); }
.highlight p{ margin:0; color:#c0cbe2; }

/* Sections */
.section{ padding: 2rem 0 2rem; } /* light global tighten */
/* .section--alt{ background: var(--surface); } */
.section__header{ margin-bottom:1.2rem; }
.section__header h2{ margin:.2rem 0 .4rem; font-size: clamp(1.5rem, 1.6vw + .9rem, 2.1rem); }
.section__lead{ color:var(--muted); }

/* Interfaces duo (Chatbot + Jira) */
.section__sublead{ color:#c0cbe2; margin:.4rem 0 1rem; }
.interfaces{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:stretch; position:relative;
}
.interface-card{
  padding:1rem; border-radius:1rem;
  background: linear-gradient(180deg, #0f1627, #0d1424);
  border:1px solid #1c2538; box-shadow: var(--shadow);
  min-width: 0; /* Prevents grid blowout */
}
.interface-card h4{ margin:.2rem 0 .4rem; color:#eaf1ff; }
.interface-card p{ margin:.1rem 0 .7rem; color:#b7c3db; }
.snippet{
  display:inline-block; background:#0b1220; color:#e2e8f0;
  border:1px solid #1f2937; border-radius:.5rem; padding:.35rem .5rem; font-size:.9rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  /* Enable horizontal scroll for very long unbreakable text */
  overflow-x: auto;
  white-space: nowrap;
}

/* Grid helpers */
.grid{ display:grid; gap:1.4rem; }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.card{
  border:1px solid #1c2538; border-radius:1rem; padding:1rem 1rem;
  background: linear-gradient(180deg, #0f1627, #0d1424); box-shadow: var(--shadow);
}

.panel-note{
  margin-top:2rem; padding:1rem; border:1px dashed #2d3a5a; background:#0f172a; border-radius:.9rem; color:#b7c3db;
}

.callout{
  position: relative;
  margin-top:2rem; padding:1rem 1.2rem;
  background: #0d1423; border-radius:.6rem; color:#c9d6ef;
}

/* Add purple accent on BOTH ends for callout */
.callout::before,
.callout::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
}
.callout::before{ left:0; border-radius:.6rem 0 0 .6rem; }
.callout::after{ right:0; border-radius:0 .6rem .6rem 0; }

/* When panel-note is also a callout, keep padding consistent */
.panel-note.callout{
  padding:1rem 1.2rem;
  border: none; /* side accents handled by ::before/::after */
}

.embed{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; margin-top:1rem; }
.embed__left,
.embed__right{
  min-width: 0; /* Prevents grid blowout */
}
.code{
  background:#0b1220; color:#e2e8f0; border-radius:.8rem; padding:.8rem; overflow:auto; border:1px solid #1f2937; white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  /* Enable horizontal scroll for long unbreakable strings */
  overflow-x: auto;
}

/* Ensure code blocks inside cards don't overflow */
.card .code{
  width: 100%;
  box-sizing: border-box;
}

/* KPIs & Pricing & FAQ */
.kpis{ display:grid; grid-template-columns: repeat(5,1fr); gap:1rem; margin-bottom:1.2rem; }
.kpi{
  border:1px solid #1c2538; background: linear-gradient(180deg, #0f1627, #0d1424);
  border-radius:1rem; padding:.9rem; text-align:center; box-shadow: var(--shadow);
}
.kpi__value{ display:block; font-weight:800; font-size:1.2rem; color:var(--success); }
.kpi__label{ color:var(--muted); font-size:.95rem; }

/* Sizing for inline KPI SVG icons */
.kpi-ico{
  width:28px;
  height:28px;
  display:inline-block;
  vertical-align:middle;
  color: var(--success); /* make the KPI arrows green */
}

.list-block .dash{ margin-top:.6rem; }
.dash{ list-style:none; padding:0; margin:0; }
.dash li{ padding-left:1rem; position:relative; margin:.35rem 0; }
.dash li::before{ content:"—"; position:absolute; left:0; color:var(--muted); }

.check{ list-style:none; padding:0; margin:0;flex-grow: 1;}
.check li{ padding-left:1.6rem; position:relative; margin:.4rem 0; }
.check li::before{
  content:""; position:absolute; left:0; top:.45rem; width:.9rem; height:.9rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 25%, var(--accent) 26% 100%);
  border:1px solid #1f9e88;
}

.pricing{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:stretch;
}
.price-card{
  border:1px solid #1c2538; background: linear-gradient(180deg, #10182b, #0e1626);
  border-radius:1.1rem; padding:1.2rem; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:.8rem;
}
/* Tighter spacing after plan titles */
.price-card h3{
  margin:.1rem 0 .2rem; /* reduced bottom margin */
  line-height:1.2;
}
.price-card--featured{ border-color:#2a3a63; box-shadow: 0 10px 30px rgba(155,140,255,0.18), var(--shadow); position:relative; justify-content: flex-end; }
.badge{
  position:absolute; top:-12px; right:14px; background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1018; padding:.25rem .5rem; border-radius:.5rem; font-size:.8rem; font-weight:800;
}
.price{ font-size:2rem; margin:0 0 .4rem; }
.price__curr, .price__per{ font-size:1rem; color:var(--muted); }

/* Standalone light plan – visually distinct, full width, softer gradient */
.price-card--standalone{
  margin-bottom: 1.25rem;
}
.price-card--light{
  position: relative;
  border-color: #1e3544;
  background:
    linear-gradient(180deg, #0e1b28, #0d1722);
  box-shadow:
    0 0 0 1px rgba(28,53,72,.35) inset,
    0 12px 34px rgba(0,0,0,.38),
    var(--glow);
}
.price-card--light .badge{
  left: 14px;
  right: auto;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, #7cc9ff 50%));
  color: #06121b;
}
.price-card--light h3{
  color: color-mix(in oklab, var(--accent) 70%, #eaf1ff 30%);
}
.price-card--light .price__amt{
  color: #eaf1ff;
}
.price-card--light .check li::before{
  /* shift accent to match "light" tone */
  background: radial-gradient(circle at 30% 30%, #fff 0 25%, var(--accent) 26% 100%);
  border-color: color-mix(in oklab, var(--accent) 70%, #1f9e88 30%);
}

.faq{ border:1px solid #1c2538; background: linear-gradient(180deg, #0f1627, #0d1424); border-radius:.8rem; padding:.6rem .8rem; margin:.6rem 0; }
.faq summary{ font-weight:700; cursor:pointer; color:#eaf1ff; }
.faq__body{ padding:.6rem 0 .1rem; color:#b3bfd6; }

/* Contact */
.contact{ border:1px solid #1c2538; background: linear-gradient(180deg, #0f1627, #0d1424); border-radius:1rem; padding:1rem; box-shadow: var(--shadow); }
.field{ display:flex; flex-direction:column; gap:.35rem; margin:.4rem 0; }
.field span{ color:#c7d3ea; font-weight:600; }
.field input, .field textarea{
  width:100%; padding:.8rem .9rem; border:1px solid #24314e; border-radius:.7rem; background:#0a111e; color:var(--text);
}
.field input:focus, .field textarea:focus{ outline: none; border-color: #36528e; box-shadow: 0 0 0 3px rgba(124,201,255,.18); }
.note{ margin-top: 2rem; color:var(--muted); font-size:.95rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); background: var(--surface-2); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; flex-wrap:wrap; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; }
.footer-nav{ display:flex; gap:.8rem; flex-wrap:wrap; }
.footer-nav a{ color:var(--muted); text-decoration:none; }
.footer-nav a:hover{ color:#fff; }

/* Reveal animations (ONE-TIME via JS unobserve) */
.reveal{ opacity:0; transform: translateY(14px) scale(.98); will-change: transform, opacity; }
.reveal.in-view{ opacity:1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal[data-reveal="fade"]{ transform:none; }
.reveal[data-reveal="pop"]{ transform: scale(.96); }
.reveal[data-reveal="fade-up"]{ transform: translateY(16px); }
.reveal.in-view[data-reveal="pop"]{ transform: scale(1); }

@media (min-width: 720px){
/* Directional slide variants */
  .reveal[data-reveal="slide-right"]{ opacity:0; transform: translateX(24px); }
  .reveal[data-reveal="slide-left"]{  opacity:0; transform: translateX(-24px); }
  .reveal.in-view[data-reveal="slide-right"],
  .reveal.in-view[data-reveal="slide-left"]{
    opacity:1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
}

/* Floating background blobs (decorative) */
.bg-blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; width:42vmax; height:42vmax; filter: blur(60px); opacity:.16;
  background: radial-gradient(circle at 30% 30%, #9b8cff, transparent 55%),
              radial-gradient(circle at 70% 70%, #7cc9ff, transparent 55%);
  mix-blend-mode: screen; border-radius: 50%;
  animation: float 26s ease-in-out infinite;
}
.b1{ top:-10vmax; left:-8vmax; }
.b2{ bottom:-14vmax; right:-10vmax; animation-duration: 32s; }
.b3{ top:20%; right:20%; width:32vmax; height:32vmax; animation-duration: 22s; opacity:.12; }
@keyframes float{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(2%, -4%, 0) scale(1.06);} }

/* Responsive */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
  .interfaces{ grid-template-columns: 1fr; }
  .nav__toggle{ display:block; width: 100%; height: 100%;}
  header nav.nav {display: inline-block; width: 33px; height: 33px;}
  .nav__list{
    display:none; position:absolute; right:1rem; top:58px;
    background: #0b111a; border:1px solid var(--line); border-radius:.8rem; padding:.6rem; flex-direction:column; min-width: 220px; box-shadow:var(--shadow);
  }
  .nav__list.is-open{ display:flex; }
  .sticky-title{ top:54px; }

  .hero__highlights{ grid-template-columns: 1fr; }
  .snippet{
    font-size: 0.85rem;
    padding: 0.3rem 0.45rem;
  }
}

@media (max-width:720px){
  .kpis{ grid-template-columns: repeat(2,1fr); }
  .pricing{ grid-template-columns: 1fr; }
  .embed{ grid-template-columns: 1fr; }
  .code{
    font-size: 0.85rem;
    padding: 0.6rem;
    max-width: calc(100vw - 8%);
  }
}

/* Print */
@media print{
  .site-header, .sticky-title, .hero__actions, .footer-inner .footer-nav, .bg-blobs { display:none !important; }
  .section{ page-break-inside: avoid; }
}

/* Centered section helper (desktop + mobile) */
.section--mid{
  min-height: 44vh;                /* still centered but shorter to reduce gap */
  display: grid;
  place-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;            /* reduced bottom padding -> tighter gap to next heading */
}

/* Reduce top padding for the very next section after highlights */
#highlights + .section { padding-top: 2.2rem; }

/* Middle highlights grid */
.mid-highlights{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-inline: auto;
  text-align: center;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
/* Box styling for the three highlight items */
.highlight-box{
  background: linear-gradient(180deg, #10182c, #0e1626);
  border:1px solid #1c2538;
  border-radius:1rem;
  box-shadow: var(--shadow);
  padding:1.5rem 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.highlight-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(124,201,255,.25);
}
.highlight-box h4{
  margin:.3rem 0 .6rem;
  font-size:1.15rem;
  color:var(--brand);
}
.highlight-box p{
  margin:0;
  color:#c0cbe2;
}

@media (max-width: 960px){
  .section--mid{ min-height: 46vh; }
  .mid-highlights{ grid-template-columns: 1fr; }
}

/* --- Rotating hero line --- */
.lead#hero-rotator{
  position: relative;
  overflow: hidden;
  /* Başlangıçta tek satır kadar yer tut; JS aktif satırın gerçek yüksekliğini burada set edecek */
  min-height: 1.6em;
  /* Yükseklik JS ile değiştikçe yumuşak geçiş yap */
  transition: height .45s ease;
}
.lead#hero-rotator .rotator-line{
  position: absolute;
  left: 0; right: 0; top: 0;
  transform: translateY(100%); /* start below */
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  will-change: transform, opacity;
}
.lead#hero-rotator .rotator-line.is-visible{
  transform: translateY(0);     /* in place */
  opacity: 1;
}
.lead#hero-rotator .rotator-line.exit{
  transform: translateY(-100%); /* slide up and out */
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .lead#hero-rotator .rotator-line{
    transition: none;
    transform: none !important;
  }
}