/* ===================================================
   VEBİS — Design tokens
   =================================================== */
:root{
  --ink:#0F1720;
  --ink-2:#161F2B;
  --paper:#F6F4EF;
  --paper-2:#EFEBE2;
  --mint:#7CF29C;
  --coral:#FF6B4A;
  --sky:#8FB8FF;
  --slate:#3B4452;
  --slate-soft:#6B7684;
  --line-dark:rgba(255,255,255,0.09);
  --line-light:rgba(15,23,32,0.10);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:14px;
  --radius-sm:8px;
  --wrap:1120px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--slate);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit; cursor:pointer; background:none; border:none;}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem, 5vw, 3.4rem); font-weight:700;}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:700; margin-bottom:.6rem;}
h3{font-size:1.15rem; font-weight:600;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--slate-soft);
  margin-bottom:.9rem;
}
.section-lede{max-width:640px; color:var(--slate-soft); margin-bottom:2.6rem; font-size:1.02rem;}
.accent{color:var(--coral);}

/* subtle grain overlay for texture, keeps flat colors from feeling flat */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================================================
   Buttons
   =================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  border-radius:100px;
  font-weight:600;
  font-size:.94rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn.full{width:100%; justify-content:center;}

.btn-primary{background:var(--coral); color:#fff; box-shadow:0 6px 16px rgba(255,107,74,.28);}
.btn-primary:hover{box-shadow:0 10px 22px rgba(255,107,74,.36);}

.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--line-light);}
.btn-outline:hover{border-color:var(--ink);}

.btn-ghost{color:var(--ink); border-bottom:1.5px solid var(--ink); border-radius:0; padding:13px 4px;}

.btn-whatsapp{background:var(--ink); color:var(--mint);}
.btn-whatsapp:hover{background:#000;}
.btn-whatsapp.large{margin-top:1.8rem;}

/* ===================================================
   Header
   =================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,244,239,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink);}
.logo .dot{color:var(--coral);}
.nav{display:flex; gap:2rem;}
.nav a{font-size:.94rem; font-weight:500; color:var(--slate);}
.nav a:hover{color:var(--ink);}
.header-cta{padding:10px 20px; font-size:.86rem;}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:28px;}
.nav-toggle span{height:2px; background:var(--ink); border-radius:2px;}

/* ===================================================
   Hero + terminal signature element
   =================================================== */
.hero{padding:88px 0 96px;}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.lede{font-size:1.08rem; color:var(--slate-soft); max-width:520px; margin:1.3rem 0 2rem;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.6rem;}
.hero-stats{display:flex; gap:2.4rem;}
.hero-stats li{display:flex; flex-direction:column;}
.hero-stats strong{font-family:var(--font-display); font-size:1.3rem; color:var(--ink);}
.hero-stats span{font-size:.82rem; color:var(--slate-soft);}

.terminal{
  background:var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,32,.28);
}
.terminal-bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px;
  background:var(--ink-2);
  border-bottom:1px solid var(--line-dark);
}
.tdot{width:10px; height:10px; border-radius:50%;}
.tdot.r{background:#FF6B4A;} .tdot.y{background:#F2C94C;} .tdot.g{background:#7CF29C;}
.terminal-title{margin-left:8px; font-family:var(--font-mono); font-size:.76rem; color:var(--slate-soft);}
.terminal-body{
  font-family:var(--font-mono);
  font-size:.86rem;
  color:#D7DEE6;
  padding:22px 20px;
  min-height:220px;
}
.terminal-body .line{margin-bottom:9px; opacity:0; animation:fadeIn .3s forwards;}
.terminal-body .ok{color:var(--mint);}
.terminal-body .cursor{display:inline-block; width:7px; height:1em; background:var(--mint); vertical-align:middle; animation:blink 1s steps(1) infinite;}
@keyframes fadeIn{to{opacity:1;}}
@keyframes blink{50%{opacity:0;}}

/* ===================================================
   Sections
   =================================================== */
.section{padding:96px 0;}
.section.alt{background:var(--paper-2);}

/* pricing */
.priority-note{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--ink); color:#fff;
  padding:16px 22px; border-radius:var(--radius-sm);
  margin-bottom:2.6rem; font-size:.92rem;
}
.priority-badge{font-family:var(--font-mono); background:var(--mint); color:var(--ink); padding:5px 12px; border-radius:100px; font-size:.78rem; font-weight:600;}

.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.price-card{
  background:#fff; border:1px solid var(--line-light); border-radius:var(--radius);
  padding:34px 28px; display:flex; flex-direction:column;
  position:relative;
}
.price-card.featured{
  background:var(--ink); border-color:var(--ink); color:#F2F1EC;
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(15,23,32,.25);
}
.price-card.featured h3, .price-card.featured .price-tag{color:#fff;}
.price-card.featured .price-time{color:var(--mint);}
.price-card.featured .price-list li{color:#C9D1DB; border-color:var(--line-dark);}
.featured-tag{position:absolute; top:-13px; left:28px; background:var(--mint); color:var(--ink); font-family:var(--font-mono); font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:100px;}
.price-tag{font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--ink); margin:.4rem 0 .1rem;}
.price-time{font-size:.82rem; color:var(--slate-soft); margin-bottom:1.6rem;}
.price-list{margin-bottom:2rem; flex:1;}
.price-list li{padding:10px 0; border-bottom:1px solid var(--line-light); font-size:.92rem; padding-left:22px; position:relative;}
.price-list li::before{content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700;}
.price-card.featured .price-list li::before{color:var(--mint);}

/* process */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.pnum{font-family:var(--font-mono); color:var(--coral); font-size:.85rem; font-weight:600;}
.process h3{margin:.6rem 0 .5rem;}
.process p{font-size:.92rem; color:var(--slate-soft);}

/* drafts / browser mockups */
.tabs{display:flex; gap:10px; margin-bottom:2rem; flex-wrap:wrap;}
.tab-btn{padding:10px 20px; border-radius:100px; border:1.5px solid var(--line-light); font-size:.88rem; font-weight:600; color:var(--slate-soft);}
.tab-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.draft-panels{position:relative;}
.browser-mock{display:none; border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(15,23,32,.14); border:1px solid var(--line-light);}
.browser-mock.active{display:block;}
.browser-chrome{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--line-light);}
.browser-chrome span{width:9px; height:9px; border-radius:50%; background:#E3E0D8;}
.browser-url{margin-left:10px; font-family:var(--font-mono); font-size:.74rem; color:var(--slate-soft); background:var(--paper); padding:3px 10px; border-radius:6px;}
.mock-screen{padding:22px; min-height:280px;}
.mock-cafe{background:#FBF6EF;}
.mock-corp{background:#F4F6F9;}
.mock-shop{background:#FFF7F5;}
.mock-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.mock-logo{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink);}
.mock-links{display:flex; gap:14px;}
.mock-links i{width:34px; height:8px; border-radius:4px; background:var(--line-light); display:block;}
.mock-cart{width:26px; height:22px; border-radius:5px; background:var(--coral);}
.mock-hero{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.mock-hero-text{display:flex; flex-direction:column; gap:10px; justify-content:center;}
.l-lg{height:18px; width:85%; background:#D9CFBE; border-radius:5px;}
.l-sm{height:10px; width:55%; background:#E3DACB; border-radius:5px;}
.mock-corp .l-lg{background:#C9D3E0;}
.mock-corp .l-sm{background:#D6DEE8;}
.mock-btn{margin-top:8px; width:110px; height:30px; border-radius:100px; background:var(--coral);}
.mock-hero-img{background:linear-gradient(135deg,#E6C79C,#D97757); border-radius:12px; min-height:120px;}
.mock-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.mock-cards div{height:70px; background:#fff; border-radius:10px; border:1px solid var(--line-light);}
.mock-split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin-bottom:20px;}
.mock-split-text{display:flex; flex-direction:column; gap:12px;}
.mock-split-block{background:linear-gradient(135deg,#8FB8FF,#3B4452); min-height:140px; border-radius:12px;}
.mock-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.mock-strip i{height:50px; background:#fff; border:1px solid var(--line-light); border-radius:8px; display:block;}
.mock-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.mock-product{aspect-ratio:1; background:linear-gradient(160deg,#FFD9CC,#FF6B4A); border-radius:10px;}

/* team */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.team-card{background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding:30px;}
.avatar{
  width:56px; height:56px; border-radius:50%;
  background:var(--avatar-color);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  margin-bottom:1.2rem;
}
.team-card .role{font-size:.86rem; color:var(--coral); font-weight:600; margin:.2rem 0 .8rem;}
.team-card p{font-size:.92rem; color:var(--slate-soft); margin-bottom:1.2rem;}
.tags{display:flex; gap:8px; flex-wrap:wrap;}
.tags span{font-family:var(--font-mono); font-size:.72rem; background:var(--paper-2); padding:5px 10px; border-radius:100px; color:var(--slate);}

/* contact */
.contact-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-list{margin:1.8rem 0;}
.contact-list li{display:flex; align-items:center; gap:12px; padding:10px 0; font-size:.94rem;}
.contact-list svg{color:var(--coral); flex-shrink:0;}
.contact-form{background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding:32px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:.84rem; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line-light); border-radius:8px;
  font-family:var(--font-body); font-size:.94rem; color:var(--ink); background:var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;}
.form-note{margin-top:12px; font-size:.86rem; color:var(--mint); font-weight:600; text-align:center; min-height:1.2em;}

/* footer */
.site-footer{border-top:1px solid var(--line-light); padding:36px 0;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-inner p{font-size:.84rem; color:var(--slate-soft);}
.footer-links{display:flex; gap:20px; font-size:.86rem;}

/* ===================================================
   Responsive
   =================================================== */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:40px;}
  .pricing-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .price-card.featured{transform:none;}
  .process{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;}
  .mock-hero, .mock-split{grid-template-columns:1fr;}
  .mock-cards, .mock-strip{grid-template-columns:repeat(2,1fr);}
  .mock-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 720px){
  .nav{
    position:absolute; top:76px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line-light);
    flex-direction:column; padding:16px 24px; gap:0;
    display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line-light);}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  .process{grid-template-columns:1fr;}
}