:root{
  --navy:#061a36;--navy2:#0b2f68;--blue:#0b57c2;--blue2:#1a7be7;
  --orange:#f47712;--orange2:#ff9b3d;--sky:#edf5ff;--paper:#f8fbff;
  --ink:#18253a;--muted:#627085;--white:#fff;--line:#dce6f2;
  --shadow:0 18px 48px rgba(7,34,72,.13)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55}
a{text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
.container{width:min(1160px,calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,26,54,.96);backdrop-filter:blur(12px);box-shadow:0 5px 20px rgba(0,0,0,.14)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:950;letter-spacing:.04em}
.brand img{width:48px;height:48px;object-fit:cover;border-radius:11px;background:#fff}
.nav-toggle{display:none;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}
.nav-links{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.nav-links a{color:#dce8f8;font-weight:800;font-size:14px}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{background:var(--orange);padding:11px 17px;border-radius:999px;color:#fff!important}
.hero{background:
 radial-gradient(circle at 84% 18%,rgba(244,119,18,.26),transparent 28%),
 radial-gradient(circle at 10% 0%,rgba(26,123,231,.25),transparent 30%),
 linear-gradient(135deg,var(--navy),#0b418f);
 color:#fff;padding:78px 0 92px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,76px);line-height:.98;letter-spacing:-.045em;margin:16px 0}
.hero p{font-size:19px;color:#dce9f8;max-width:680px;margin:0 0 28px}
.kicker{display:inline-block;color:#ffd0aa;font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 21px;border-radius:12px;font-weight:900;transition:.2s;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(244,119,18,.25)}
.btn-secondary{background:var(--blue);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.08)}
.btn-outline{border:2px solid var(--blue);color:var(--blue);background:#fff}
.hero-art{position:relative;min-height:380px}
.hero-banner{position:absolute;right:0;top:20px;width:92%;border-radius:16px;box-shadow:0 28px 60px rgba(0,0,0,.3);transform:rotate(2deg)}
.hero-logo{position:absolute;left:0;bottom:8px;width:145px;border-radius:26px;background:#fff;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.32);transform:rotate(-4deg)}
.page-hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:64px 0}
.page-hero h1{font-size:clamp(40px,6vw,64px);margin:0 0 12px;line-height:1.02}
.page-hero p{font-size:18px;color:#dce9f8;max-width:760px}
section{padding:82px 0}
.section-head{text-align:center;max-width:790px;margin:0 auto 40px}
.section-head .eyebrow{display:inline-block;color:var(--orange);font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.11em;margin-bottom:9px}
.section-head h2{font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-.035em;margin:0 0 13px}
.section-head p{font-size:18px;color:var(--muted);margin:0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 10px 28px rgba(7,34,72,.08)}
.card-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--sky),#fff0e4);font-size:25px}
.card h3{margin:15px 0 8px}.card p{color:var(--muted);margin:0 0 18px}
.card-link{color:var(--blue);font-weight:900}
.showcase-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:240px 240px;gap:18px}
.showcase-card{position:relative;overflow:hidden;border-radius:22px;box-shadow:var(--shadow);min-height:220px;background:#fff}
.showcase-card.big{grid-row:span 2}
.showcase-card img{width:100%;height:100%;object-fit:cover}
.showcase-overlay{position:absolute;inset:auto 0 0;padding:28px;color:#fff;background:linear-gradient(transparent,rgba(4,16,34,.94))}
.showcase-overlay span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#ffd0aa;font-weight:900}
.showcase-overlay h3{font-size:27px;margin:6px 0}
.mockup{height:100%;padding:25px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.mockup.web{background:linear-gradient(145deg,#0c5bc4,#082d70)}
.mockup.brand{background:linear-gradient(145deg,#f47712,#a83d00)}
.mockup.print{background:linear-gradient(145deg,#fff,#dcecff);color:var(--navy)}
.browser{background:#fff;border-radius:12px;padding:9px;box-shadow:0 18px 40px rgba(0,0,0,.24);transform:rotate(-3deg)}
.browser-bar{height:12px;background:#e8eef6;border-radius:999px;margin-bottom:8px}
.browser-body{height:125px;border-radius:8px;background:linear-gradient(135deg,#0d55ba,#f47712)}
.cards-mini{display:flex;gap:12px;align-items:flex-end}
.card-mini{width:155px;aspect-ratio:1.75;border-radius:12px;padding:15px;box-shadow:0 14px 30px rgba(0,0,0,.25);font-weight:900}
.card-mini.one{background:#fff;color:#0b3f92;transform:rotate(-5deg)}
.card-mini.two{background:#073f9a;color:#fff;transform:rotate(6deg)}
.career-section{background:linear-gradient(135deg,#071b38,#0a4d9f);color:#fff}
.career-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center}
.career-copy h2{font-size:clamp(36px,5vw,55px);line-height:1.04;margin:10px 0 16px}
.career-copy p{color:#dce9f8;font-size:18px}
.career-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.career-card{background:#fff;color:var(--ink);border-radius:20px;padding:26px;box-shadow:0 20px 45px rgba(0,0,0,.2)}
.shop-banner{background:linear-gradient(135deg,#f47712,#ff9a3c);color:#fff;border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;box-shadow:0 22px 50px rgba(244,119,18,.25)}
.shop-banner h2{font-size:clamp(32px,5vw,50px);margin:0 0 8px}.shop-banner p{font-size:18px;margin:0;color:#fff4e9}
.shop-banner .btn{background:#fff;color:var(--navy)}
.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.service-detail:nth-child(even) .service-copy{order:2}
.service-visual{min-height:310px;border-radius:24px;box-shadow:var(--shadow);padding:30px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.service-visual.blue{background:linear-gradient(145deg,#0b57c2,#07306f)}
.service-visual.orange{background:linear-gradient(145deg,#f47712,#9f3700)}
.service-visual.light{background:linear-gradient(145deg,#fff,#dcecff);color:var(--navy)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.portfolio-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.portfolio-card .visual{height:220px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.portfolio-card .copy{padding:22px}.portfolio-card .copy p{color:var(--muted)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:center}
.about-logo{background:#fff;border-radius:28px;padding:18px;box-shadow:var(--shadow)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}
.contact-panel,.contact-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:800;margin-bottom:6px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid #cfdbe9;border-radius:10px;background:#fff}
textarea{min-height:150px;resize:vertical}
.form-group{margin-bottom:16px}
.notice{background:#fff8ef;border:1px solid #ffd4ad;color:#7b3c00;padding:14px;border-radius:12px;margin-top:14px}
.sales-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sales-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 10px 28px rgba(7,34,72,.08);display:flex;flex-direction:column}
.sales-card p{color:var(--muted);flex:1}
.cards-sec{background:var(--sky)}
.config{background:#fff;padding:28px;border-radius:22px;box-shadow:var(--shadow)}
.step{padding:22px 0;border-bottom:1px solid var(--line)}.step:last-child{border:0}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.choices.qty{grid-template-columns:repeat(4,1fr)}
.choice{border:2px solid var(--line);background:#fff;border-radius:14px;padding:16px;text-align:left;cursor:pointer}
.choice.active{border-color:var(--orange);background:#fff5eb}.choice b,.choice span{display:block}.choice span{font-size:13px;color:var(--muted);margin-top:3px}
.summary{margin-top:22px;background:var(--navy);color:#fff;padding:21px;border-radius:17px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.summary a{background:var(--orange);color:#fff;padding:14px 19px;border-radius:10px;font-weight:900}
.maintenance{display:grid;grid-template-columns:1fr 1fr;gap:20px}.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.plan.best{border:2px solid var(--orange)}.price{font-size:40px;font-weight:900}
.site-footer{background:#05152d;color:#c8d6e7;padding:44px 0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
.footer-grid h4{color:#fff;margin-top:0}.footer-grid a{display:block;color:#c8d6e7;margin:7px 0}
.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:55px;border-radius:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:20px}
@media(max-width:980px){
  .hero-grid,.career-grid,.about-grid,.contact-grid,.service-detail{grid-template-columns:1fr}
  .service-detail:nth-child(even) .service-copy{order:initial}
  .showcase-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .showcase-card.big{grid-row:auto;grid-column:span 2}
  .grid-4,.portfolio-grid,.sales-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-toggle{display:block}.nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--navy);padding:18px;flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}.nav-links a{padding:10px}
  .hero{padding:58px 0 70px}.hero-art{min-height:250px}.hero-logo{width:95px}
  .showcase-grid,.grid-4,.grid-3,.portfolio-grid,.sales-grid,.career-cards,.maintenance,.choices,.form-row{grid-template-columns:1fr}
  .showcase-card.big{grid-column:auto}.choices.qty{grid-template-columns:1fr 1fr}
  .summary,.shop-banner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}
}

.price-badge{display:inline-flex;background:#fff4e8;color:#a94400;border:1px solid #ffd2aa;padding:7px 11px;border-radius:999px;font-size:13px;font-weight:900;margin:2px 0 16px}
.portfolio-card img{width:100%;height:100%;object-fit:cover}
.portfolio-card.before-after{grid-column:span 2}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;height:100%}
.ba-grid figure{margin:0;position:relative;overflow:hidden}
.ba-grid figcaption{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.78);color:#fff;padding:7px 10px;border-radius:999px;font-weight:900;font-size:12px}
.upload-box{background:#fff;border:2px dashed #a9bfda;border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.upload-box input[type=file]{padding:18px;background:var(--sky);border:1px dashed #8ba7c7}
.upload-note{font-size:14px;color:var(--muted);margin-top:8px}
.price-table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.price-table th,.price-table td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left}
.price-table th{background:var(--navy);color:#fff}
.price-table tr:last-child td{border-bottom:0}
@media(max-width:720px){.portfolio-card.before-after{grid-column:auto}.ba-grid{grid-template-columns:1fr}.ba-grid figure{min-height:220px}}

.website-funnel{background:linear-gradient(135deg,#071b38,#0a4d9f);color:#fff}
.website-funnel .section-head p{color:#dce9f8}
.hosting-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hosting-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);padding:28px;border-radius:22px}
.hosting-card h3{font-size:27px;margin-top:0}
.hosting-card p{color:#dce9f8}
.hosting-card.best{background:#fff;color:var(--ink);border:3px solid var(--orange);position:relative}
.hosting-card.best p{color:var(--muted)}
.hosting-card.best:before{content:"BEST DEAL";position:absolute;right:18px;top:18px;background:var(--orange);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:950}
@media(max-width:720px){.hosting-grid{grid-template-columns:1fr}}