/* ============================================================
   IDYLLIC TECHNOLOGIES — Main Stylesheet
   Dark / Sleek / Modern Tech — White & Light Green
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
  --bg:          #070d14;
  --bg2:         #0c1520;
  --bg3:         #111e2d;
  --bg4:         #162338;
  --green:       #4cffb3;
  --green-dim:   #29d98c;
  --green-glow:  rgba(76,255,179,.13);
  --green-glow2: rgba(76,255,179,.06);
  --white:       #eef4ff;
  --muted:       #7a92ae;
  --dim:         #3d5068;
  --border:      rgba(76,255,179,.10);
  --border2:     rgba(76,255,179,.28);
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --r:           14px;
  --r-sm:        7px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --t:           .3s;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--white);font-family:var(--font-body);line-height:1.75;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none;transition:color var(--t) var(--ease)}
a:hover{color:#fff}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── Background Ambience ── */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(76,255,179,.055) 0%,transparent 62%),
    radial-gradient(ellipse 45% 35% at 92% 85%,  rgba(76,255,179,.038) 0%,transparent 55%),
    radial-gradient(ellipse 30% 25% at 5%  70%,  rgba(76,255,179,.025) 0%,transparent 50%);
  pointer-events:none;z-index:0
}

/* ── Layout ── */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
section{position:relative;z-index:1}
.section-pad{padding:6rem 0}
.bg2{background:var(--bg2)}

/* ── Typography ── */
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:700;line-height:1.18;color:var(--white)}
h1{font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.02em}
h3{font-size:clamp(1.15rem,2.5vw,1.55rem)}
p{color:var(--muted);margin-bottom:1rem}
.accent{color:var(--green)}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem
}
.eyebrow::before{content:'';width:2rem;height:1px;background:var(--green);flex-shrink:0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.88rem 2rem;
  border-radius:var(--r-sm);font-family:var(--font-head);font-weight:600;
  font-size:.92rem;letter-spacing:.025em;transition:all var(--t) var(--ease)}
.btn-primary{background:var(--green);color:var(--bg);box-shadow:0 0 26px rgba(76,255,179,.28)}
.btn-primary:hover{background:#fff;color:var(--bg);box-shadow:0 0 44px rgba(76,255,179,.5);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--border2);color:var(--white)}
.btn-outline:hover{border-color:var(--green);color:var(--green);background:var(--green-glow);transform:translateY(-2px)}

/* ── Grid ── */
.grid-hero{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.5rem}

/* ── Cards ── */
.card{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:2rem;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
  position:relative;overflow:hidden
}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  transform:translateX(-100%);transition:transform .65s var(--ease)
}
.card:hover{border-color:var(--border2);transform:translateY(-5px);box-shadow:0 12px 48px rgba(76,255,179,.10)}
.card:hover::after{transform:translateX(100%)}

.card-icon{
  width:50px;height:50px;border-radius:var(--r-sm);
  background:var(--green-glow);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.45rem;margin-bottom:1.5rem
}
.card h3{margin-bottom:.65rem}
.card p{font-size:.9rem;margin:0}

.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.tag{font-family:var(--font-mono);font-size:.68rem;padding:.22rem .6rem;
  background:rgba(76,255,179,.07);border:1px solid var(--border);
  border-radius:4px;color:var(--green)}

/* ── Terminal Widget ── */
.terminal{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:2rem;position:relative;overflow:hidden
}
.terminal::after{
  content:'';position:absolute;bottom:-30%;right:-15%;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(76,255,179,.07) 0%,transparent 70%);
  pointer-events:none
}
.t-bar{display:flex;gap:7px;margin-bottom:1.5rem}
.t-dot{width:12px;height:12px;border-radius:50%}
.t-dot:nth-child(1){background:#ff5f57}
.t-dot:nth-child(2){background:#febc2e}
.t-dot:nth-child(3){background:#28c840}
.t-code{font-family:var(--font-mono);font-size:.8rem;line-height:2;color:var(--muted)}
.t-code .g{color:var(--green)}
.t-code .b{color:#7bbcff}
.t-code .y{color:#ffd87a}
.t-code .w{color:var(--white)}

/* ── Value List ── */
.value-list{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.75rem}
.value-item{display:flex;gap:1rem;align-items:flex-start}
.value-icon{
  width:38px;height:38px;min-width:38px;border-radius:var(--r-sm);
  background:var(--green-glow);display:flex;align-items:center;
  justify-content:center;font-size:1rem;margin-top:2px
}
.value-item h4{font-size:1rem;margin-bottom:.2rem}
.value-item p{font-size:.875rem;margin:0}

/* ── CTA Strip ── */
.cta-strip{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:4.5rem 2rem;text-align:center;
  position:relative;overflow:hidden
}
.cta-strip::before{
  content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%);
  width:700px;height:350px;
  background:radial-gradient(ellipse,rgba(76,255,179,.07) 0%,transparent 68%);
  pointer-events:none
}
.cta-strip h2{margin-bottom:1rem}
.cta-strip p{max-width:500px;margin:0 auto 2rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── Stats Row ── */
.stats-row{display:flex;gap:3rem;padding-top:3rem;margin-top:3.5rem;border-top:1px solid var(--border)}
.stat-num{font-family:var(--font-head);font-size:2.4rem;font-weight:800;line-height:1}
.stat-num span{color:var(--green)}
.stat-label{font-size:.82rem;color:var(--muted);margin-top:.3rem}

/* ── Page Hero ── */
.page-hero{padding:9rem 0 5rem;text-align:center;border-bottom:1px solid var(--border)}
.page-hero h1{margin-bottom:1rem}
.page-hero>div>p{max-width:620px;margin:0 auto;font-size:1.05rem}

/* ── Portfolio ── */
.port-thumb{
  height:200px;display:flex;align-items:center;justify-content:center;
  font-size:3rem;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--bg2),var(--bg4));
  position:relative;overflow:hidden
}
.port-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(76,255,179,.05),transparent 60%)}
.port-body{padding:1.5rem}
.port-type{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:.5rem}
.port-body h3{font-size:1.1rem;margin-bottom:.5rem}
.port-body p{font-size:.875rem;margin:0}

/* ── Blog ── */
.blog-meta{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.blog-date{font-family:var(--font-mono);font-size:.72rem;color:var(--dim)}
.blog-cat{font-family:var(--font-mono);font-size:.68rem;padding:.2rem .55rem;
  background:var(--green-glow);border:1px solid var(--border2);border-radius:4px;color:var(--green)}
.blog-read{font-family:var(--font-mono);font-size:.78rem;color:var(--green);
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:4rem;margin-top:3rem}
.ci-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:2rem}
.ci-icon{
  width:46px;height:46px;min-width:46px;border-radius:var(--r-sm);
  background:var(--green-glow);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem
}
.ci-item h4{font-size:.82rem;color:var(--muted);margin-bottom:.2rem}
.ci-item p,.ci-item a{font-size:.95rem;color:var(--white);margin:0}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.fg{display:flex;flex-direction:column;gap:.45rem}
.fg label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fg input,.fg textarea,.fg select{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.85rem 1rem;color:var(--white);font-family:var(--font-body);font-size:.93rem;
  outline:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);width:100%
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(76,255,179,.09)
}
.fg textarea{resize:vertical;min-height:135px}
.fg select option{background:var(--bg3)}

/* ── Nav ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.3rem 0;transition:all var(--t) var(--ease);border-bottom:1px solid transparent
}
#nav.scrolled{
  background:rgba(7,13,20,.92);backdrop-filter:blur(22px);
  padding:.9rem 0;border-bottom-color:var(--border)
}
#nav .container{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.logo{font-family:var(--font-head);font-weight:800;font-size:1.38rem;
  letter-spacing:-.025em;color:var(--white)}
.logo span{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:2.5rem}
.nav-links a{
  font-family:var(--font-head);font-size:.88rem;font-weight:500;
  color:var(--muted);letter-spacing:.02em;position:relative;
  transition:color var(--t) var(--ease)
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1px;background:var(--green);transition:width var(--t) var(--ease)
}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{margin-left:.75rem}

.hamburger{display:none;flex-direction:column;gap:5px;padding:4px;z-index:1001}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all var(--t) var(--ease);border-radius:2px}

/* ── Footer ── */
#footer{background:var(--bg2);border-top:1px solid var(--border);padding:4.5rem 0 2rem;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{font-size:.88rem;margin:1rem 0 1.5rem;max-width:270px}
.footer-h{font-family:var(--font-head);font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin-bottom:1.25rem}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{font-size:.875rem;color:var(--muted);transition:all var(--t) var(--ease)}
.footer-links a:hover{color:var(--green);padding-left:4px}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:2rem;border-top:1px solid var(--border)
}
.footer-bottom p{font-size:.82rem;color:var(--dim);margin:0}
.social-row{display:flex;gap:.75rem}
.social-btn{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--muted);transition:all var(--t) var(--ease)
}
.social-btn:hover{border-color:var(--border2);color:var(--green);background:var(--green-glow)}

/* ── Hero Grid BG ── */
.hero-grid-bg{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  background-image:linear-gradient(rgba(76,255,179,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,255,179,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 50%,black 20%,transparent 100%)
}

.hero-content{position:relative;z-index:2}

/* ── Badge ── */
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.38rem 1rem;border:1px solid var(--border2);border-radius:100px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--green);
  background:var(--green-glow);margin-bottom:2rem
}
.hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ── Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:1024px){
  .grid-hero,.grid-2{grid-template-columns:1fr;gap:3rem}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-links{
    display:none;flex-direction:column;position:fixed;
    top:0;left:0;right:0;bottom:0;background:var(--bg);
    align-items:center;justify-content:center;gap:2.2rem;z-index:1000
  }
  .nav-links.open{display:flex}
  .nav-links.open a{font-size:1.4rem}
  .hamburger{display:flex;flex-shrink:0}
  .logo{font-size:1rem}
  .logo-mark{width:22px;min-width:22px;gap:2px;margin-right:6px}
  .logo-dot{width:4px;height:4px}
  .stats-row{flex-wrap:wrap;gap:1.5rem}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .cta-strip{padding:2.75rem 1.5rem}
  .section-pad{padding:4rem 0}
}

/* ── Logo 11-dot mark ── */
.logo-mark{display:inline-flex;flex-wrap:wrap;width:26px;min-width:26px;flex-shrink:0;gap:3px;align-items:center;vertical-align:middle;margin-right:8px}
.logo-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0}
.logo-wrap{display:flex;align-items:center;gap:0;min-width:0;flex-shrink:1;max-width:100%}

/* ── Blog article page ── */
.article-hero{padding:9rem 0 3.5rem;border-bottom:1px solid var(--border)}
.article-body{max-width:780px;margin:0 auto;padding:3.5rem 2rem}
.article-body h2{font-size:1.5rem;margin:2.5rem 0 1rem;color:var(--white)}
.article-body h3{font-size:1.15rem;margin:2rem 0 .75rem;color:var(--white)}
.article-body p{color:var(--muted);line-height:1.85;margin-bottom:1.25rem}
.article-body strong{color:var(--white)}
.article-body ol,.article-body ul{padding-left:1.5rem;margin-bottom:1.25rem;color:var(--muted)}
.article-body li{margin-bottom:.5rem;line-height:1.75}
.article-body pre{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:1.25rem 1.5rem;overflow-x:auto;margin:1.5rem 0}
.article-body code{font-family:var(--font-mono);font-size:.82rem;color:var(--green);line-height:1.7}
.article-body pre code{color:#c8d8ee}
.article-body img{width:100%;border-radius:var(--r-sm);border:1px solid var(--border);margin:1.5rem 0}
.article-body .step-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:.4rem}
.article-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-bottom:2rem;transition:color .3s}
.article-back:hover{color:var(--green)}
.article-tag{font-family:var(--font-mono);font-size:.68rem;padding:.22rem .6rem;background:rgba(76,255,179,.07);border:1px solid var(--border);border-radius:4px;color:var(--green)}