/*
Theme Name: Ariyan Creative Studio
Author: Ariyan Creative Studio
Description: One-page creative studio landing page.
Version: 1.0
License: GPL-2.0-or-later
*/
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#07040f;
  --bg2:#0d0718;
  --card:#100b1c;
  --line:#241433;
  --purple:#9d00ff;
  --purple2:#6f19ff;
  --pink:#e01885;
  --text:#f7f3ff;
  --muted:#aaa0b5;
  --gold:#ffb000;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hind Siliguri","Inter",Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.acs{overflow:hidden}
.container{width:min(1040px,92%);margin:auto}

/* NAV */
.nav{
  height:62px;border-bottom:1px solid #20122d;
  background:#090510;
  position:sticky;top:0;z-index:50;
}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:9px;font-family:Inter,sans-serif}
.logo-box{
  width:27px;height:27px;border-radius:6px;background:#fff;
  display:grid;place-items:center;color:#7b12df;font-size:13px;font-weight:900
}
.logo-text{font-size:11px;line-height:1.05;font-weight:800}
.logo-text small{display:block;font-size:6px;letter-spacing:1px;color:#c8bdd1}
.menu{display:flex;align-items:center;gap:27px;font-size:11px;color:#d8d0df}
.menu a:hover{color:#c94cff}
.nav-btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:30px;cursor:pointer;font-weight:700
}
.nav-btn{padding:8px 17px;background:linear-gradient(90deg,#9415ff,#a82cf5);font-size:10px}

/* HERO */
.hero{
  min-height:515px;display:flex;align-items:center;text-align:center;
  background:
   radial-gradient(circle at 50% 0%,rgba(105,0,170,.24),transparent 45%),
   linear-gradient(180deg,#10031b 0%,#07040f 72%);
  border-bottom:1px solid #1c1028;
}
.hero-inner{max-width:760px;margin:auto}
.pill{
  display:inline-block;padding:6px 14px;border-radius:20px;
  background:#2a0c48;border:1px solid #4d167b;color:#d6b3ff;
  font-size:10px;margin-bottom:14px
}
.hero h1{
  margin:0;font-size:clamp(35px,5vw,57px);line-height:1.02;
  font-weight:800;letter-spacing:-1.8px
}
.hero h1 .grad{
  background:linear-gradient(90deg,#9e12ff,#ff329c);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-lead{color:#ffb000;font-size:15px;font-weight:700;margin:15px 0 10px}
.hero-desc{max-width:620px;margin:0 auto;color:#9c93a5;font-size:11px;line-height:1.75}
.actions{display:flex;justify-content:center;gap:9px;margin:22px 0}
.btn{padding:10px 20px;font-size:11px}
.btn-primary{background:linear-gradient(90deg,#8e00ff,#e21c88);color:#fff}
.btn-secondary{background:transparent;border:1px solid #68149b;color:#ddd}
.stats{
  margin:14px auto 0;padding-top:14px;border-top:1px solid #21122e;
  max-width:430px;display:grid;grid-template-columns:repeat(3,1fr)
}
.stat strong{display:block;color:#ffb000;font:800 20px Inter,sans-serif}
.stat span{font-size:9px;color:#8d8495}

/* SECTIONS */
.section{padding:62px 0}
.section-head{text-align:center;max-width:650px;margin:0 auto 30px}
.section-head h2{font-size:26px;line-height:1.15;margin:0 0 10px;font-weight:800}
.section-head p{margin:0;color:#91889a;font-size:10px;line-height:1.7}
.center-title{
  color:#cf43ff;
  background:linear-gradient(90deg,#9b18ff,#ff43a7);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* BENEFITS */
.intro-copy{text-align:center;max-width:640px;margin:0 auto 20px}
.intro-copy h3{margin:0 0 5px;font-size:18px}
.intro-copy h3 span{color:#b02dff}
.intro-copy p{margin:0;color:#92899c;font-size:10px;line-height:1.65}
.benefit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:680px;margin:auto
}
.benefit{
  padding:15px;border:1px solid #21122f;background:#0d0917;border-radius:8px;
  display:flex;gap:12px;align-items:flex-start
}
.icon{
  flex:0 0 24px;width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,#8500ff,#dd2c9d);
  display:grid;place-items:center;font-size:11px
}
.benefit h4{font-size:11px;margin:0 0 2px}
.benefit p{font-size:8px;color:#8d8595;margin:0;line-height:1.5}

/* SERVICES */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:850px;margin:auto}
.service{
  padding:18px;border:1px solid #251535;background:#100b1a;border-radius:8px;
  min-height:125px
}
.service-icon{
  width:25px;height:25px;border-radius:6px;background:linear-gradient(135deg,#a100ff,#ff2b8c);
  display:grid;place-items:center;margin-bottom:13px;font-size:12px
}
.service h3{font:700 11px Inter,sans-serif;margin:0 0 8px}
.service p{font-size:8px;color:#8e8696;line-height:1.6;margin:0}

/* PORTFOLIO */
.portfolio{background:linear-gradient(180deg,#08050f,#0a0612)}
.portfolio-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:860px;margin:auto
}
.work-card{
  background:#110b1b;border:1px solid #2a1839;border-radius:7px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.work-art{
  height:145px;background:#eee;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center
}
.tv{
  width:77%;height:87%;position:relative;display:flex;align-items:flex-end;justify-content:center
}
.tv:before,.tv:after{
  content:"";position:absolute;background:#a9692d
}
.tv:before{width:76%;height:55%;bottom:2%;left:9%;border:6px solid #b57436;background:#e7e7e7}
.tv:after{width:13%;height:62%;right:0;bottom:0;border:5px solid #a9692d;background:#f0f0f0}
.tv-screen{
  position:absolute;left:20%;bottom:15%;width:48%;height:28%;
  border:5px solid #a9692d;background:#ddd
}
.tv-small{
  position:absolute;left:37%;bottom:48%;width:27%;height:17%;
  border:4px solid #a9692d;background:#eee
}
.work-info{padding:9px 8px 10px;text-align:center}
.work-info strong{display:block;font-size:9px}
.work-info span{display:block;color:#a996b2;font-size:8px;margin:2px 0 7px}
.work-btn{
  display:block;background:linear-gradient(90deg,#8b10ff,#e12685);
  border-radius:3px;padding:5px;font-size:8px;font-weight:700
}

/* CONTACT */
.contact-grid{
  display:grid;grid-template-columns:330px 1fr;gap:25px;max-width:860px;margin:auto
}
.contact-card,.form-card{
  background:#100b19;border:1px solid #241534;border-radius:8px;padding:18px
}
.contact-card h3,.form-card h3{margin:0 0 15px;font-size:13px}
.contact-item{display:flex;gap:10px;margin:13px 0}
.contact-item .icon{flex-basis:22px;width:22px;height:22px}
.contact-item strong{display:block;font-size:9px}
.contact-item span{display:block;color:#8f8698;font-size:8px}
.social-box{margin-top:16px;padding-top:13px;border-top:1px solid #271637}
.social-box p{font-size:9px;margin:0 0 8px}
.socials{display:flex;gap:8px}
.socials a{flex:1;text-align:center;padding:7px;border-radius:5px;font-size:8px;font-weight:700}
.whatsapp{background:#18ce70}.telegram{background:#079ad6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{margin-bottom:10px}
.field label{display:block;font-size:8px;color:#c7becd;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid #4d1673;background:#08050f;color:#eee;
  border-radius:5px;padding:8px;font-size:9px;outline:none
}
.field textarea{min-height:75px;resize:vertical}
.submit{width:100%;padding:10px;border:0;border-radius:5px;background:linear-gradient(90deg,#8e00ff,#9b20f0);color:#fff;font-size:10px;font-weight:800;cursor:pointer}

/* MAP */
.map{
  height:235px;margin-top:10px;
  background:
    linear-gradient(rgba(4,4,8,.72),rgba(4,4,8,.72)),
    repeating-linear-gradient(35deg,transparent 0 34px,#34323a 35px 36px),
    repeating-linear-gradient(125deg,transparent 0 49px,#25242b 50px 51px),
    #16161b;
  position:relative;overflow:hidden
}
.map:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 53% 48%,rgba(146,0,255,.2),transparent 18%)
}
.map-pin{
  position:absolute;z-index:2;left:53%;top:48%;width:17px;height:17px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#bd1cff;
  box-shadow:0 0 20px #bd1cff
}

/* FOOTER */
.footer{border-top:1px solid #21132e;padding:18px 0;background:#08050f}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:#777;font-size:8px}
.footer-brand{font-weight:700;color:#bdb5c4}
.footer-social{display:flex;gap:8px}
.footer-social a{width:22px;height:22px;border-radius:50%;background:#27103d;display:grid;place-items:center;color:#d99cff;font-size:8px}

/* FLOATING WHATSAPP */
.float-wa{
  position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;
  background:#18ce70;color:#fff;display:grid;place-items:center;font-size:19px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:100
}

/* RESPONSIVE */
@media(max-width:800px){
  .menu{display:none}
  .hero{min-height:590px}
  .service-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .work-art{height:190px}
}
@media(max-width:520px){
  .container{width:92%}
  .section{padding:48px 0}
  .hero h1{font-size:35px}
  .hero-desc{font-size:10px}
  .benefit-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .work-art{height:145px}
  .stats{max-width:340px}
  .stat strong{font-size:17px}
  .footer-inner{flex-direction:column;gap:12px}
  .form-row{grid-template-columns:1fr}
}