:root{
    --ink:#14142B;
    --ink-soft:#565973;
    --bg:#ffffff;
    --bg-soft:#F7F7FB;
    --line:#E7E7F0;
    --primary:#4F46E5;
    --primary-dark:#3730A3;
    --accent:#7C3AED;
    --gradient: linear-gradient(90deg,#4F46E5 0%,#7C3AED 100%);
	--gradient-sec: background: #bf7dc9;
background: -webkit-linear-gradient(90deg, rgba(191, 125, 201, 1) 0%, rgba(224, 161, 255, 1) 50%, rgba(251, 201, 255, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(191, 125, 201, 1) 0%, rgba(224, 161, 255, 1) 50%, rgba(251, 201, 255, 1) 100%);
background: linear-gradient(90deg, rgba(191, 125, 201, 1) 0%, rgba(224, 161, 255, 1) 50%, rgba(251, 201, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#BF7DC9", endColorstr="#FBC9FF", GradientType=1);
    --radius:16px;
  }
  *{box-sizing:border-box;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{
    font-family:'Plus Jakarta Sans',sans-serif;
  }
  a{text-decoration:none;}

  /* ---------- NAVBAR ---------- */
  .navbar-custom{
    padding:18px 0;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:1000;
  }
  .brand{
    font-weight:800;
    font-size:1.35rem;
    color:var(--ink);
  }
  .nav-link-custom{
    color:#000;
    font-weight:500;
    font-size:.95rem;
    margin:0 30px;
    transition:color .2s ease;
  }
  .nav-link-custom:hover{color:var(--primary);}
  .btn-gradient{
    background:var(--gradient);
    color:#fff;
    border:none;
    font-weight:600;
    padding:10px 22px;
    border-radius:10px;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 8px 20px rgba(79,70,229,.25);
  }
  .btn-gradient:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(79,70,229,.35);
  }
  .btn-outline-custom{
    border:1.5px solid var(--line);
    color:var(--ink);
    font-weight:600;
    padding:10px 22px;
    border-radius:10px;
    background:#fff;
    transition:.2s ease;
  }
  .btn-outline-custom:hover{
    border-color:var(--primary);
    color:var(--primary);
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:100px 0 70px;
    background:url("../img/bg.png") no-repeat center;
    text-align:center;
	  background-size: cover;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--bg-soft);
    border:1px solid var(--line);
    color:var(--primary);
    font-weight:600;
    font-size:.85rem;
    padding:7px 16px;
    border-radius:999px;
    margin-bottom:24px;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--gradient);
  }
  .hero h1{
    font-size:3.1rem;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
    max-width:820px;
    margin:0 auto 22px;
  }
  .hero h1 .gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead-text{
    color:var(--ink-soft);
    font-size:1.15rem;
    max-width:640px;
    margin:0 auto 34px;
    line-height:1.6;
  }
  .hero-ctas{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:40px;
  }
  .btn-lg-custom{
    padding:14px 30px;
    font-size:1rem;
  }
  .hero-tags{
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
    color:var(--ink-soft);
    font-size:.9rem;
    font-weight:500;
  }
  .hero-tags span{display:flex;align-items:center;gap:8px;}
  .hero-tags .bullet{width:6px;height:6px;border-radius:50%;background:var(--primary);}

  /* ---------- PROBLEM SECTION ---------- */
  .section{padding:90px 0;}
  .section-soft{background:var(--bg-soft);}
  .section-title{
    font-size:2.1rem;
    font-weight:800;
    letter-spacing:-.5px;
    margin-bottom:16px;
  }
  .section-title .gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .section-sub{
    color:var(--ink-soft);
    font-size:1.05rem;
    max-width:680px;
  }
  .center-text{text-align:center;margin-left:auto;margin-right:auto;}

  .problem-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 22px;
    height:100%;
    transition:.25s ease;
  }
  .problem-card:hover{
    border-color:#F3C1C1;
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(20,20,43,.06);
  }
  .problem-icon{
    width:46px;height:46px;
    border-radius:12px;
    background:#FDEDED;
    color:#DC5C5C;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    margin-bottom:16px;
  }
  .problem-card h3{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:8px;
  }
  .problem-card p{
    color:var(--ink-soft);
    font-size:.92rem;
    margin:0;
    line-height:1.5;
  }
  .callout-bar{
    margin-top:50px;
    background:var(--gradient);
    color:#fff;
    border-radius:var(--radius);
    padding:24px 32px;
    text-align:center;
    font-weight:600;
    font-size:1.05rem;
  }

  /* ---------- SERVICES ---------- */
  .eyebrow-label{
    color:var(--primary);
    font-weight:700;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:10px;
    display:block;
  }
  .service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:34px 28px;
    height:100%;
    transition:.25s ease;
    position:relative;
  }
  .service-card:hover{
    box-shadow:0 20px 40px rgba(79,70,229,.12);
    transform:translateY(-6px);
    border-color:#D9D4FA;
  }
  .service-icon{
    width:52px;height:52px;
    border-radius:14px;
   background: #bf7dc9;
background: -webkit-linear-gradient(90deg, rgba(191, 125, 201, 0.34) 0%, rgba(224, 161, 255, 0.36) 50%, rgba(251, 201, 255, 0.4) 100%);
background: -moz-linear-gradient(90deg, rgba(191, 125, 201, 0.34) 0%, rgba(224, 161, 255, 0.36) 50%, rgba(251, 201, 255, 0.4) 100%);
background: linear-gradient(90deg, rgba(191, 125, 201, 0.34) 0%, rgba(224, 161, 255, 0.36) 50%, rgba(251, 201, 255, 0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#BF7DC9", endColorstr="#FBC9FF", GradientType=1);
	  
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    font-size:1.4rem;
    margin-bottom:20px;
  }
  .service-tag{
    display:inline-block;
    font-size:.78rem;
    font-weight:600;
    color:var(--primary);
    background:#EEECFC;
    padding:4px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }
  .service-card h3{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:12px;
  }
  .service-card p{
    color:var(--ink-soft);
    font-size:.94rem;
    line-height:1.6;
    margin-bottom:20px;
  }
  .service-features{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .service-features li{
    font-size:.85rem;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
  }
  .service-features li::before{
    content:"✓";
    color:var(--primary);
    font-weight:700;
  }

  .perk-row{
    margin-top:56px;
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    text-align:center;
  }
  .perk{max-width:220px;}
  .perk-icon{
    width:50px;height:50px;
    border-radius:50%;
    background:var(--bg-soft);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
    color:var(--primary);
    font-size:1.2rem;
  }
  .perk h4{font-size:1rem;font-weight:700;margin-bottom:6px;}
  .perk p{font-size:.85rem;color:var(--ink-soft);margin:0;}

  /* ---------- PROCESS ---------- */
  .process-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px 24px;
    height:100%;
    position:relative;
  }
  .process-num{
    font-size:1.6rem;
    font-weight:800;
    color:transparent;
    -webkit-text-stroke:1.5px var(--primary);
    opacity:.5;
    margin-bottom:14px;
  }
  .process-card h3{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:10px;
  }
  .process-card p{
    color:var(--ink-soft);
    font-size:.9rem;
    line-height:1.55;
    margin:0;
  }
  .process-banner{
    margin-top:46px;
    background:var(--ink);
    color:#fff;
    border-radius:var(--radius);
    padding:26px 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    text-align:center;
  }
  .process-banner .big{
    font-weight:800;
    font-size:1.3rem;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .process-banner .small{
    color:#B9B9CC;
    font-size:.9rem;
  }

  /* ---------- WHY US ---------- */
  .why-item{
    display:flex;
    gap:16px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
  }
  .why-item:last-child{border-bottom:none;}
  .why-icon{
    width:40px;height:40px;
    min-width:40px;
    border-radius:10px;
    background:#EEECFC;
    color:var(--primary);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
  }
  .why-item h4{font-size:1.02rem;font-weight:700;margin-bottom:4px;}
  .why-item p{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.5;}

  .why-panel{
    background:var(--gradient);
    border-radius:20px;
    padding:36px 30px;
    color:#fff;
    height:100%;
  }
  .why-panel h3{
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:20px;
  }
  .why-panel ul{list-style:none;padding:0;margin:0 0 26px;}
  .why-panel ul li{
    display:flex;align-items:center;gap:10px;
    font-size:.92rem;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .why-panel ul li:last-child{border-bottom:none;}
  .why-panel ul li::before{
    content:"✓";
    background:rgba(255,255,255,.2);
    width:20px;height:20px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.7rem;
    flex-shrink:0;
  }
  .why-panel blockquote{
    font-size:.98rem;
    font-style:italic;
    line-height:1.6;
    border-left:3px solid rgba(255,255,255,.4);
    padding-left:16px;
    margin:0;
  }

  .stats-row{
    margin-top:56px;
    display:flex;
    justify-content:center;
    gap:70px;
    flex-wrap:wrap;
    text-align:center;
  }
  .stat-num{
    font-size:2.4rem;
    font-weight:800;
    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .stat-label{color:var(--ink-soft);font-size:.9rem;}

  /* ---------- PORTFOLIO ---------- */
  .portfolio-card{
    display:block;
    text-decoration:none;
    color:inherit;
  }
  .portfolio-thumb{
    position:relative;
    width:100%;
    aspect-ratio:4/3.6;
    border-radius:18px;
    overflow:hidden;
    background:#EDEDED;
    margin-bottom:18px;
  }
  .portfolio-thumb .scene{
    position:absolute;
    inset:0;
  }
  .portfolio-thumb .badge-live{
    position:absolute;
    bottom:16px;
    left:18px;
    color:#fff;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.2px;
    z-index:2;
  }
  .portfolio-thumb .badge-url{
    position:absolute;
    bottom:16px;
    right:18px;
    color:#fff;
    font-weight:600;
    font-size:.95rem;
    z-index:2;
    opacity:0;
    transform:translateY(6px);
    transition:.3s ease;
  }
  .portfolio-thumb .arrow-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.6) rotate(-45deg);
    width:56px;height:56px;
    border-radius:50%;
    background:rgba(20,20,43,.85);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    opacity:0;
    transition:.35s ease;
    z-index:2;
  }
  .portfolio-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(20,20,43,0);
    transition:.35s ease;
    z-index:1;
  }
  .portfolio-card:hover .portfolio-thumb::after{background:rgba(20,20,43,.18);}
  .portfolio-card:hover .arrow-btn{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  .portfolio-card:hover .badge-url{opacity:1;transform:translateY(0);}
  .portfolio-card:hover .portfolio-thumb .badge-live{opacity:0;transition:.25s ease;}

  .scene-1{background:linear-gradient(135deg,#AFC9C4 0%,#8FB0AA 55%,#7FA39D 100%);}
  .scene-1 .plank{
    position:absolute;
    width:230%;
    height:26px;
    background:linear-gradient(90deg,#DCEAE6,#9FBDB6);
    top:38%;left:-38%;
    transform:rotate(-32deg);
    border-radius:4px;
    box-shadow:0 18px 26px rgba(0,0,0,.12);
  }
  .scene-1 .bowl{
    position:absolute;
    width:120px;height:60px;
    background:#1C1D22;
    border-radius:0 0 120px 120px;
    bottom:22%;right:22%;
  }
  .scene-1 .ball-big{
    position:absolute;
    width:44px;height:44px;
    background:#1C1D22;
    border-radius:50%;
    bottom:calc(22% + 46px);
    right:calc(22% + 38px);
  }
  .scene-1 .ball-small{
    position:absolute;
    width:24px;height:24px;
    background:#1C1D22;
    border-radius:50%;
    bottom:calc(22% + 84px);
    right:calc(22% + 48px);
  }
  .scene-1 .base{
    position:absolute;
    width:44px;height:16px;
    background:#1C1D22;
    bottom:20.5%;
    right:calc(22% + 34px);
  }

  .scene-2{background:linear-gradient(160deg,#A9A9AC 0%,#8C8C90 100%);}
  .scene-2 .grid{
    position:absolute;
    left:0;top:0;
    width:42%;height:100%;
    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 2px,transparent 2px 26px),
                      repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 2px,transparent 2px 26px);
    opacity:.5;
  }
  .scene-2 .cube{
    position:absolute;
    width:130px;height:170px;
    background:linear-gradient(160deg,#E8A23A,#C9752B);
    bottom:16%;left:38%;
    clip-path:polygon(0 15%,60% 0,100% 12%,100% 100%,40% 100%,0 85%);
  }
  .scene-2 .glass{
    position:absolute;
    width:100px;height:150px;
    background:rgba(255,255,255,.25);
    border:1px solid rgba(255,255,255,.4);
    bottom:16%;left:56%;
    border-radius:4px;
  }
  .scene-2 .sphere{
    position:absolute;
    width:110px;height:110px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#C9D8CC,#7E9E8A 70%);
    bottom:16%;right:10%;
  }

  .scene-3{background:linear-gradient(135deg,#8C8FC7 0%,#7477BE 55%,#9B9ED4 100%);}
  .scene-3 .wallL{
    position:absolute;left:0;top:0;bottom:35%;width:28%;
    background:#B9BAD9;
  }
  .scene-3 .cubeGray{
    position:absolute;
    width:140px;height:110px;
    background:linear-gradient(160deg,#D6D6E4,#B9BAD0);
    bottom:22%;left:44%;
    border-radius:4px;
  }
  .scene-3 .cubeSpeck{
    position:absolute;
    width:80px;height:80px;
    background:#A2A5C4;
    bottom:calc(22% + 92px);
    left:56%;
    border-radius:4px;
  }
  .scene-3 .hole{
    position:absolute;
    width:44px;height:44px;
    border-radius:50%;
    background:#8C8FC7;
    bottom:36%;
    left:60%;
  }
  .scene-3 .ballPurple{
    position:absolute;
    width:60px;height:60px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#B7B9E0,#8285BE 70%);
    bottom:20%;
    left:22%;
  }

  .portfolio-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .portfolio-meta h4{
    font-size:1.02rem;
    font-weight:600;
    margin:0;
  }
  .portfolio-for{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 12px;
    font-size:.78rem;
    color:var(--ink-soft);
    font-weight:500;
    white-space:nowrap;
  }
  .portfolio-for .sq-icon{
    width:14px;height:14px;
    background:var(--gradient);
    border-radius:3px;
    display:inline-block;
  }
  .portfolio-more{
    text-align:center;
    margin-top:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--ink-soft);
    font-size:1rem;
  }
  .portfolio-more a{
    color:var(--ink);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .portfolio-more a .arrow{transition:transform .25s ease;}
  .portfolio-more a:hover .arrow{transform:translateX(4px);}

  .portfolio-carousel-wrap{
    position:relative;
    padding:0 4px;
  }
  .portfolio-track{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:6px 6px 10px;
    margin:0 -6px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .portfolio-track::-webkit-scrollbar{display:none;}
  .portfolio-track .portfolio-card-wrap{
    flex:0 0 calc(33.333% - 16px);
    scroll-snap-align:start;
  }
  .portfolio-nav{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:30px;
  }
  .portfolio-nav-btn{
    width:46px;height:46px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
    cursor:pointer;
    transition:.2s ease;
  }
  .portfolio-nav-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
  }
  .portfolio-nav-btn:disabled{
    opacity:.35;
    cursor:default;
    transform:none;
    border-color:var(--line);
    color:var(--ink);
  }
  .portfolio-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
  }
  .portfolio-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--line);
    cursor:pointer;
    transition:.25s ease;
    border:none;
    padding:0;
  }
  .portfolio-dot.active{
    background:var(--primary);
    width:22px;
    border-radius:5px;
  }

  @media (max-width:992px){
    .portfolio-track .portfolio-card-wrap{flex:0 0 calc(50% - 12px);}
  }
  @media (max-width:576px){
    .portfolio-track .portfolio-card-wrap{flex:0 0 85%;}
  }

  /* ---------- FAQ ---------- */
  .accordion-item{
    border:1px solid var(--line);
    border-radius:12px !important;
    margin-bottom:12px;
    overflow:hidden;
  }
  .accordion-button{
    font-weight:600;
    font-size:1rem;
    color:var(--ink);
    background:#fff;
    padding:20px 24px;
  }
  .accordion-button:not(.collapsed){
    color:var(--primary);
    background:var(--bg-soft);
    box-shadow:none;
  }
  .accordion-button:focus{box-shadow:none;}
  .accordion-button::after{
    background-image:none;
    content:"+";
    font-size:1.4rem;
    font-weight:400;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease;
  }
  .accordion-button:not(.collapsed)::after{
    content:"–";
  }
  .accordion-body{
    color:var(--ink-soft);
    font-size:.93rem;
    line-height:1.6;
    padding:0 24px 22px;
  }
  .faq-footer{
    text-align:center;
    margin-top:36px;
    color:var(--ink-soft);
  }

  /* ---------- CONTACT ---------- */
  .contact-section{
    background:var(--ink);
    color:#fff;
    border-radius:28px;
    margin:0 auto;
    max-width:1200px;
    padding:64px 50px;
    overflow:hidden;
    position:relative;
  }
  .contact-section h2{
    font-size:2.1rem;
    font-weight:800;
    margin-bottom:16px;
  }
  .contact-section p.lead-text{
    color:#B9B9CC;
    font-size:1.02rem;
    line-height:1.6;
    max-width:440px;
  }
  .contact-perk{
    display:flex;align-items:center;gap:12px;
    margin-bottom:18px;
    font-size:.92rem;
  }
  .contact-perk .ic{
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(124,58,237,.25);
    color:#B7A9FC;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .contact-form{
    background:#fff;
    border-radius:20px;
    padding:34px 30px;
    color:var(--ink);
  }
  .contact-form label{
    font-weight:600;
    font-size:.88rem;
    margin-bottom:6px;
  }
  .contact-form .form-control{
    border-radius:10px;
    border:1px solid var(--line);
    padding:11px 14px;
    font-size:.92rem;
    margin-bottom:18px;
  }
  .contact-form .form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
  }
  .contact-form small{
    color:var(--ink-soft);
    font-size:.78rem;
    display:block;
    text-align:center;
    margin-top:10px;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:36px 0;
    text-align:center;
    color:var(--ink-soft);
    font-size:.88rem;
    border-top:1px solid var(--line);
  }
  footer .brand{font-size:1.1rem;margin-bottom:6px;display:block;}

  @media (max-width:768px){
    .hero h1{font-size:2.1rem;}
    .hero p.lead-text{font-size:1rem;}
    .section{padding:60px 0;}
    .section-title{font-size:1.6rem;}
    .stats-row{gap:36px;}
    .perk-row{gap:32px;}
    .contact-section{padding:44px 22px;border-radius:20px;}
    .service-features{grid-template-columns:1fr;}
  }