/* =========================================================
   Sharvil Kotian — portfolio home
   Rebuilt from the Wix site. Measurements taken at 1440px.
   ========================================================= */

:root{
  --night:#110B11;
  --plum:#361A3D;
  --plum-soft:#615266;
  --ink:#1D1F29;
  --accent:#A566B6;
  --lilac:#E3C5F8;
  --ghost:#E9E9E9;
  --heading-grey:#605E5E;

  --wrap:min(1291px, calc(100% - 48px));
  --nav-h:54px;
  --radius:30px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --f-body:'Nunito Sans', 'Avenir Next', Avenir, system-ui, sans-serif;
  --f-nav:'Barlow', 'DIN Next', system-ui, sans-serif;
  --f-logo:'Syncopate', 'Lulo Clean', system-ui, sans-serif;
  --f-hand:'Amatic SC', cursive;
  --f-hero-sub:'Montserrat', system-ui, sans-serif;
  --f-black:'Arial Black', 'Archivo Black', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h);}
body{
  margin:0; background:#fff; color:var(--plum);
  font-family:var(--f-body); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p,ul{margin:0;}
ul{padding:0; list-style:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
main{padding-top:var(--nav-h);}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h);
  background:var(--night);
}
.nav__inner{
  width:var(--wrap); height:100%; margin:0 auto; padding:0 83px 0 23px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__logo{
  font-family:var(--f-logo); font-weight:700; font-size:23px; letter-spacing:.12em;
  color:var(--accent);
}
.nav__links{display:flex; gap:64px;}
.nav__links a{
  font-family:var(--f-nav); font-weight:300; font-size:18px; color:#fff;
  transition:color .25s;
}
.nav__links a:hover,
.nav__links a.is-active{color:var(--accent);}
.nav__toggle{display:none;}

/* ---------- HERO ---------- */
.hero{position:relative; height:1041px; overflow:hidden;}
.hero__particles{
  position:absolute; inset:0 0 auto; height:859px;
  background:linear-gradient(180deg, var(--night) 10%, #fff 100%);
}
.hero__particles canvas{display:block;}
.hero__content{
  position:relative; z-index:1; pointer-events:none;
  padding-top:222px; text-align:center;
  width:min(924px, calc(100% - 48px)); margin:0 auto;
}
.hero__tagline{
  font-family:var(--f-hand); font-weight:700; font-size:48px; line-height:1.2;
  letter-spacing:2.4px; text-transform:uppercase; color:var(--lilac);
}
.hero__sub{
  max-width:816px; margin:52px auto 0;
  font-family:var(--f-hero-sub); font-size:18px; line-height:36px; color:#fff;
}
.hero__photo{
  position:absolute; z-index:1; pointer-events:none;
  top:467px; left:max(24px, calc(50% - 667px));
  width:350px;
}

/* ---------- PROJECTS ---------- */
.projects{padding:215px 0 300px;}
.projects__head{text-align:center;}
.projects__ghost{
  display:block; font-family:var(--f-black); font-weight:900; font-size:72px; line-height:100.8px;
  color:var(--ghost);
}
.projects__title{
  position:relative; margin-top:-42px;
  font-weight:800; font-size:36px; line-height:50.4px; color:var(--heading-grey);
}

.grid{width:var(--wrap); margin:148px auto 0; display:flex; flex-direction:column; gap:24px;}
.row{display:grid; gap:20px;}
.row--fuelin{grid-template-columns:745fr 526fr;}
.row--bottom{grid-template-columns:670fr 599fr;}

.card{
  --bg:#eee; --bg-hover:#e4e4e4;
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  border-radius:var(--radius); background:var(--bg);
  padding:18px 23px 0;
}
a.card:hover{background:var(--bg-hover);}
.card__title{font-weight:800; font-size:36px; line-height:50.4px; color:var(--plum);}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.tags li{
  padding:6px 12px; border:1px solid #6F6A72; border-radius:999px;
  font-size:12px; font-weight:600; line-height:16px; letter-spacing:.6px; color:var(--ink);
}
.card__desc{margin-top:10px; font-size:16px; font-weight:600; line-height:23px; color:var(--plum);}
.card__media{position:relative; margin-top:auto;}
.card__media img{position:absolute; height:auto;}

/* AskERISA */
.card--askerisa{--bg:#F8DDD3; --bg-hover:#FBCDBD; min-height:500px;}
.card--askerisa .card__text{max-width:400px; padding-top:7px;}
.card--askerisa .card__media{position:absolute; left:43%; top:64px; width:52%; aspect-ratio:1728/1078;}
.m-askerisa{inset:0; width:100%; border-radius:14px; box-shadow:0 24px 60px rgba(140,43,66,.28);}

/* Fuelin 2.0 */
.card--fuelin{--bg:#F1E5E2; --bg-hover:#F7D6CC; min-height:597px;}
.card--fuelin .card__media{width:89.8%; margin-left:4.3%; aspect-ratio:628/408;}
.m-fuelin-icon{left:5.4%; top:4.4%; width:30.9%;}
.m-fuelin-macros{left:0; top:62%; width:41.7%;}
.m-fuelin-phone{left:56.5%; top:0; width:43.5%;}

/* Fuelin PDF */
.card--pdf{--bg:#C4BBCB; min-height:597px;}
.card__soon{
  position:absolute; left:0; right:0; top:321px; text-align:center;
  font-family:var(--f-black); font-size:42px; line-height:1.1; color:#fff;
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s var(--ease);
}
.card--pdf:hover .card__soon{opacity:1; transform:none;}

/* BizzNest */
.card--biznest{--bg:#E4E0B7; --bg-hover:#EEE8A4; min-height:469px; padding-top:25px;}
.card--biznest .card__text{max-width:360px;}
.card--biznest .card__desc{margin-top:37px; font-weight:400; line-height:22px; color:var(--plum);}
.card--biznest .card__media{position:absolute; left:39%; top:8px; width:44.5%; aspect-ratio:575/461;}
.m-biz-1{left:0; top:15%; width:45.6%;}
.m-biz-2{left:61.6%; top:0; width:38.4%;}

/* OwlWatch */
.card--owl{--bg:#C8CDDD; --bg-hover:#BCC4E3; min-height:605px;}
.card--owl .card__media{width:calc((100% + 46px) * .861); margin:17px -23px 23px auto; aspect-ratio:577/405;}
.m-owl{inset:0; width:100%;}

/* Busy Button */
.card--busy{--bg:#D7E6CA; --bg-hover:#DDF5C9; min-height:604px;}
.card--busy .card__text{max-width:430px;}
.card--busy .card__media{width:84.8%; margin-left:8.7%; aspect-ratio:469/413;}
.m-beaver{position:absolute; top:15px; right:0; width:18.4%; transition:opacity .3s;}
.m-beaver--b{right:0; width:20.2%; opacity:0;}
.card--busy:hover .m-beaver--a{opacity:0;}
.card--busy:hover .m-beaver--b{opacity:1;}
.m-busy-1{left:0; top:0; width:44.6%;}
.m-busy-2{left:54.4%; top:0; width:45.6%;}

/* ---------- CONTACT ---------- */
.contact{padding:61px 0 140px;}
.contact__inner{width:min(794px, calc(100% - 48px)); margin:0 auto;}
.contact__title{font-weight:800; font-size:38px; line-height:53px; color:var(--plum);}
.contact__intro{
  margin-top:32px; font-size:17px; font-weight:600; line-height:32.5px; letter-spacing:1.7px;
  color:var(--plum);
}
.contact__details{display:flex; align-items:flex-start; margin-top:50px; padding-left:11px;}
.detail{display:flex; flex-direction:column; gap:12px; min-width:243px;}
.detail__label{font-size:18px; font-weight:700; color:var(--plum); padding-left:7px;}
.detail__value{font-size:16px; font-weight:600; color:var(--plum-soft);}
.detail__value:hover{color:var(--accent);}
.socials{display:flex; gap:23px; margin-left:auto; margin-right:30px;}
.social{display:grid; place-items:center; width:54px; height:54px; color:#fff; transition:transform .25s var(--ease);}
.social:hover{transform:translateY(-3px);}
.social svg{width:34px; height:34px; fill:currentColor;}
.social--behance{background:#1769FF;}
.social--linkedin{background:#0A66C2;}
.social--instagram{background:#F6136D;}
.social--instagram svg{fill:none;}

.form{margin-top:68px; padding-left:21px; width:min(471px, 100%);}
.form__honey{position:absolute; left:-9999px;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.field{display:flex; flex-direction:column; margin-bottom:22px;}
.field__label{padding-left:12px; margin-bottom:10px; font-size:18px; font-weight:700; color:#312933;}
.field input,
.field textarea{
  width:100%; height:45px; padding:10px 14px;
  border:2px solid #5E4E62; border-radius:8px; background:#fff;
  font:inherit; font-size:16px; color:var(--plum); resize:vertical;
}
.field textarea{height:87px;}
.field input:focus,
.field textarea:focus{outline:none; border-color:var(--accent);}
.form__submit{
  margin-top:13px; width:162px; height:44px; cursor:pointer;
  border:2px solid #5E4E62; border-radius:12px; background:#fff;
  font-family:var(--f-logo); font-weight:700; font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plum-soft); transition:background .25s, color .25s;
}
.form__submit:hover{background:var(--plum); color:#fff; border-color:var(--plum);}
.form__submit:disabled{opacity:.6; cursor:wait;}
.form__status{margin-top:18px; min-height:22px; font-family:var(--f-logo); font-weight:700; font-size:14px; color:var(--plum-soft);}

/* ---------- FOOTER / TO TOP ---------- */
.footer{height:140px; background:var(--night);}
.to-top{
  position:fixed; right:40px; bottom:98px; z-index:40; width:80px; color:#8A6A92;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.to-top.is-visible{opacity:1; pointer-events:auto;}
.to-top:hover{transform:translateY(-4px); color:var(--accent);}

/* ---------- MOTION (Wix-style entrance effects) ---------- */
.js .motion{
  opacity:0;
  transition:
    opacity 1s var(--ease) var(--delay,0s),
    transform 1.1s var(--ease) var(--delay,0s),
    filter 1s var(--ease) var(--delay,0s),
    background-color .4s ease;
}
.js .motion--blur{filter:blur(14px);}
.js .motion--float{transform:translateY(70px);}
.js .motion--left{transform:translateX(-140px);}
.js .motion--right{transform:translateX(140px);}
.js .motion.is-in{opacity:1; transform:none; filter:none;}
.card{transition:background-color .4s ease;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .motion{opacity:1; transform:none; filter:none; transition:background-color .4s ease;}
}

/* ---------- TABLET ---------- */
@media (max-width:1100px){
  .nav__inner{padding:0 23px;}
  .nav__links{gap:40px;}
  .hero__photo{width:280px;}
  .card--askerisa .card__text{max-width:300px;}
  .card--biznest .card__media{left:34%; width:56%;}
}

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  :root{--radius:24px;}
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:7px;
    width:40px; height:40px; padding:8px; border:0; background:none; cursor:pointer;
  }
  .nav__toggle span{display:block; height:2px; background:#fff; transition:transform .3s var(--ease);}
  .nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg);}
  .nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg);}
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0;
    background:var(--night); padding:8px 24px 20px;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .25s, visibility .25s;
  }
  .nav__links.is-open{opacity:1; visibility:visible; transform:none;}
  .nav__links a{padding:12px 0; font-size:20px;}

  .hero{height:auto; padding-bottom:40px;}
  .hero__particles{height:620px;}
  .hero__content{padding-top:110px;}
  .hero__tagline{font-size:38px;}
  .hero__sub{margin-top:28px; font-size:16px; line-height:30px;}
  .hero__photo{position:relative; top:auto; left:auto; width:260px; margin:48px 0 0 8px;}

  .projects{padding:80px 0 120px;}
  .projects__ghost{font-size:48px; line-height:64px;}
  .projects__title{margin-top:-30px; font-size:28px; line-height:40px;}
  .grid{margin-top:64px; gap:20px;}
  .row--fuelin,.row--bottom{grid-template-columns:1fr;}

  .card{min-height:0 !important;}
  .card__title{font-size:30px; line-height:42px;}
  .card--askerisa .card__text,
  .card--biznest .card__text{max-width:none;}
  .card--askerisa{padding-bottom:0;}
  .card--askerisa .card__media{position:relative; left:auto; top:auto; width:100%; margin-top:24px; margin-bottom:-12%;}
  .card--fuelin .card__media{width:100%; margin:20px 0 0;}
  .card--pdf{min-height:240px !important; padding-bottom:24px;}
  .card__soon{position:static; margin-top:28px; opacity:1; transform:none; font-size:30px;}
  .card--biznest .card__desc{margin-top:14px;}
  .card--biznest .card__media{position:relative; left:auto; top:auto; width:100%; margin-top:20px;}
  .card--owl .card__media{width:calc(100% + 23px); margin:20px -23px 20px 0;}
  .card--busy .card__text{padding-right:22%;}
  .card--busy .card__media{width:100%; margin:20px 0 0;}
  .m-beaver{width:20%; max-width:110px;}
  .m-beaver--b{width:22%; max-width:121px;}

  .contact{padding:40px 0 100px;}
  .contact__title{font-size:32px;}
  .contact__intro{font-size:16px; line-height:28px; letter-spacing:.8px;}
  .contact__details{flex-wrap:wrap; gap:24px 0; padding-left:0;}
  .detail{min-width:50%;}
  .socials{margin:0; width:100%;}
  .form{padding-left:0; margin-top:48px;}
  .to-top{right:16px; bottom:24px; width:56px;}
}

@media (max-width:480px){
  .form__row{grid-template-columns:1fr; gap:0;}
  .detail{min-width:100%;}
}