/* Cinnaminson landing page - responsive layout inspired by the supplied reference */
:root{
  --navy:#06283a;
  --navy-2:#0a354b;
  --navy-3:#0c4058;
  --cyan:#11a8c7;
  --cyan-soft:#e9f8fb;
  --amber:#f3a628;
  --amber-soft:#fff3df;
  --ink:#0c1b27;
  --muted:#5c6973;
  --line:#dfe8ed;
  --soft:#f5f9fb;
  --warm:#fff8ed;
  --white:#fff;
  --shadow:0 14px 38px rgba(11,34,48,.09);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none}
.cinn-page{overflow:hidden}

.cinn-section{padding:86px 0}
.cinn-light{background:#fff}
.cinn-soft{background:linear-gradient(180deg,#f7fbfd 0%,#f2f7f9 100%)}
.cinn-warm{background:var(--warm)}
.cinn-dark{background:var(--navy);color:#fff}
.cinn-dark p{color:#d7e4ea}
.cinn-dark h2,.cinn-dark h3,.cinn-dark h4{color:#fff}

.cinn-heading{margin-bottom:36px}
.cinn-heading.center{text-align:center}
.cinn-heading.narrow,.narrow{max-width:850px;margin-left:auto;margin-right:auto}
.cinn-heading h2,.cinn-copy h2,.cinn-final-card h2{
  margin:10px 0 15px;
  font-size:clamp(29px,3.25vw,47px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:800;
}
.cinn-final-card h2 {
	color:#fff;
	}
.cinn-heading p{max-width:1650px;margin:8px auto;color:var(--muted)}
.cinn-copy p{color:inherit}
.cinn-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0788a3;
  background:#e9f8fb;
  border:1px solid #cceef4;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.cinn-eyebrow-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#8fe2f2}
.cinn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  border-radius:8px;
  font-size:16px;
  font-weight:800;
  transition:.25s ease;
}
.cinn-btn-dark{background:var(--navy);color:#fff}
.cinn-btn-dark:hover{transform:translateY(-2px);background:var(--navy-2)}
.cinn-btn-light{background:#fff;color:var(--navy)}
.cinn-btn-light:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,255,255,.13)}
.center-btn{text-align:center;margin-top:28px}

/* Hero */
.cinn-hero{
  position:relative;
  isolation:isolate;
  min-height:700px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 12% 18%,rgba(17,168,199,.23),transparent 26%),
    radial-gradient(circle at 90% 85%,rgba(243,166,40,.22),transparent 23%),
    linear-gradient(135deg,#072b3b 0%,#0a3344 48%,#0b2a39 100%);
  color:#fff;
  padding:92px 0 44px;
}
.cinn-grid{
  position:absolute;inset:0;z-index:-2;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
}
.cinn-glow{position:absolute;border-radius:50%;filter:blur(48px);z-index:-1}
.cinn-glow-a{width:230px;height:230px;background:rgba(13,204,232,.24);left:-110px;top:70px}
.cinn-glow-b{width:250px;height:250px;background:rgba(255,196,65,.2);right:-120px;bottom:-40px}
.cinn-hero-inner{position:relative;text-align:center}
.cinn-hero-copy{max-width:1150px;margin:auto}
.cinn-kicker{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#93e9f7;margin-bottom:12px}
.cinn-hero h1{ color:#fff;margin:0 auto 18px;max-width:850px;font-size:clamp(39px,5vw,65px);line-height:1.02;letter-spacing:-.05em}
.cinn-hero p{max-width:1150px;margin:8px auto;color:#d9e7eb;font-size:15px}
.cinn-mini-card{
  position:absolute;top:-18px;width:145px;min-height:62px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);
  backdrop-filter:blur(12px);border-radius:10px;display:grid;grid-template-columns:30px 1fr;
  align-items:center;gap:6px;padding:10px 12px;
}
.cinn-mini-left{left:0}.cinn-mini-right{right:0}
.cinn-mini-card i{grid-row:1/3;color:#75ddec}
.cinn-mini-card span{height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.cinn-mini-card span:last-child{width:65%}
.cinn-hero-services{
  margin-top:45px;display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(3,28,41,.56);backdrop-filter:blur(10px);
  overflow:hidden;
}
.cinn-hero-services div{
  min-height:96px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  border-right:1px solid rgba(255,255,255,.1)
}
.cinn-hero-services div:last-child{border-right:0}
.cinn-hero-services i{color:var(--amber);font-size:32px}
.cinn-hero-services span{font-size:16px;font-weight:700;color:#e8f0f2}

/* Cards */
.cinn-question-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cinn-question-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;min-height:92px
}
.cinn-question-card i{width:34px;height:34px;border-radius:9px;background:var(--cyan-soft);color:#0d94ae;display:grid;place-items:center;flex:none}
.cinn-question-card p{margin:0;font-weight:700;font-size:16px}
.cinn-closing-line{max-width:1150px;margin:28px auto 0;text-align:center;color:var(--muted)}

.cinn-three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cinn-service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)
}
.cinn-icon{width:48px;height:48px;border-radius:14px;background:var(--cyan-soft);color:#078ba7;display:grid;place-items:center;margin-bottom:18px}
.cinn-service-card h3{font-size:19px;line-height:1.25;margin:0 0 12px}
.cinn-service-card p,.cinn-service-card li{font-size:16px;color:var(--muted)}
.cinn-service-card ul,.cinn-panel-body ul{padding-left:19px}
.cinn-service-card li::marker,.cinn-panel-body li::marker{color:var(--amber)}

/* Splits */
.cinn-split-grid,.cinn-why-grid,.cinn-location-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.cinn-copy h2{font-size:clamp(30px,3vw,46px)}
.cinn-copy p{font-size:16px}
.cinn-dark-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0 20px}
.cinn-dark-pills span{
  padding:9px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.055);color:#e8f2f5;font-size:16px;font-weight:700
}
.cinn-ai-visual{position:relative;height:390px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.cinn-ai-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:105px;height:105px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#13abc7 0,#0f7892 45%,#0c4058 72%);box-shadow:0 0 55px rgba(17,168,199,.42);border:1px solid rgba(255,255,255,.25)}
.cinn-ai-core i{font-size:28px}.cinn-ai-core b{position:absolute;bottom:17px;font-size:10px}
.cinn-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(133,229,243,.22);border-radius:50%}
.cinn-orbit-1{width:230px;height:230px}.cinn-orbit-2{width:330px;height:330px}
.sat{position:absolute;width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:#0d3d52;border:1px solid rgba(255,255,255,.13);color:#8be2ef}
.s1{left:12%;top:22%}.s2{right:13%;top:19%}.s3{left:16%;bottom:18%}.s4{right:17%;bottom:16%}

/* 360 */
.cinn-divider{height:1px;background:linear-gradient(90deg,transparent,#d8e3e8,transparent);margin:70px 0}
.cinn-journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cinn-journey-grid div{
  min-height:116px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:19px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;justify-content:center;gap:10px
}
.cinn-journey-grid i{color:#0792ac;font-size:28px}
.cinn-journey-grid span{font-size:16px;font-weight:800}

/* Feature panels */
.cinn-dual-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cinn-feature-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.cinn-panel-top{height:102px;display:flex;align-items:center;padding:0 30px;color:#fff;font-size:28px}
.cinn-panel-top.teal{background:linear-gradient(135deg,#087f9a,#14abc6)}
.cinn-panel-top.amber{background:linear-gradient(135deg,#d98a16,#f1ad35)}
.cinn-panel-body{padding:28px}
.cinn-panel-body h2{font-size:25px;margin:0 0 12px}
.cinn-panel-body p,.cinn-panel-body li{font-size:16px;color:var(--muted)}

/* Target visual */
.cinn-target-visual{height:390px;position:relative}
.target-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(118,221,238,.25);border-radius:50%}
.target-ring.r1{width:130px;height:130px}.target-ring.r2{width:240px;height:240px}.target-ring.r3{width:350px;height:350px}
.target-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:95px;height:95px;border-radius:50%;background:#fff;color:#078ba5;display:grid;place-items:center;font-size:28px;box-shadow:0 0 40px rgba(23,184,212,.22)}
.target-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 7px rgba(243,166,40,.1)}
.d1{left:18%;top:26%}.d2{right:20%;top:23%}.d3{left:11%;bottom:28%}.d4{right:13%;bottom:24%}.d5{left:45%;top:7%}.d6{left:46%;bottom:6%}

/* Progression */
.cinn-progression{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:32px 0}
.cinn-progression span{background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(11,34,48,.06);padding:13px 17px;border-radius:10px;font-weight:800;font-size:16px}
.cinn-progression i{color:var(--amber)}
.cinn-copy-block{text-align:center;color:var(--muted)}
.cinn-five-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.cinn-five-cards div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 14px;text-align:center;box-shadow:var(--shadow)}
.cinn-five-cards i{color:#0795b0;font-size:19px}
.cinn-five-cards p{font-size:13px;color:var(--muted);margin:10px 0 0}

/* Decision */
.cinn-decision-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cinn-decision-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cinn-decision-grid article:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--amber)}
.cinn-decision-grid h3{font-size:18px;margin:0 0 9px}
.cinn-decision-grid p{font-size:16px;color:var(--muted);margin:0}

/* Why */
.cinn-stat-panel{height:320px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:grid;place-items:center;position:relative;overflow:hidden}
.stat-orb{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#169cb6,#0a3a4f 70%);position:relative;box-shadow:0 0 50px rgba(17,168,199,.28)}
.stat-orb i{font-size:28px}
.stat-orb .ring{position:absolute;border:1px dashed rgba(255,255,255,.2);border-radius:50%}
.stat-orb .one{width:180px;height:180px}.stat-orb .two{width:250px;height:250px}
.stat-bars{position:absolute;bottom:24px;left:28px;right:28px;height:48px;display:flex;gap:9px;align-items:end}
.stat-bars span{flex:1;background:linear-gradient(180deg,var(--amber),rgba(243,166,40,.3));border-radius:5px 5px 2px 2px}
.stat-bars span:nth-child(1){height:32%}.stat-bars span:nth-child(2){height:58%}.stat-bars span:nth-child(3){height:78%}.stat-bars span:nth-child(4){height:100%}
.cinn-core-wrap{margin-top:65px}
.cinn-core-wrap>h3{text-align:center;font-size:25px}
.cinn-core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.cinn-core-grid div{padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055)}
.cinn-core-grid i{color:var(--amber)}
.cinn-core-grid h4{font-size:18px;margin:8px 0 4px}.cinn-core-grid p{font-size:16px;margin:0;color:#bdd0d8}

/* Location */
.cinn-address-card{background:linear-gradient(135deg,#0b7892,#0b3a4f);color:#fff;border-radius:18px;padding:36px;box-shadow:var(--shadow)}
.cinn-address-card i{font-size:28px;margin-bottom:20px;color:#b9edf4}
.cinn-address-card p{margin:0;line-height:1.9}
.cinn-location-copy{font-size:16px;color:var(--muted)}

/* Fit */
.cinn-fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cinn-fit-grid article{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;box-shadow:var(--shadow)}
.cinn-fit-grid i{color:var(--amber);font-size:19px}
.cinn-fit-grid h3{font-size:18px;line-height:1.35;margin:12px 0 8px}
.cinn-fit-grid p{font-size:16px;color:#078aa4;font-weight:800;margin:0}

/* FAQ */
.cinn-accordion{max-width:900px;margin:auto}
.cinn-accordion details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:9px;box-shadow:0 6px 18px rgba(11,34,48,.05);overflow:hidden}
.cinn-accordion summary{list-style:none;cursor:pointer;font-size:16px;font-weight:800;padding:16px 50px 16px 18px;position:relative}
.cinn-accordion summary::-webkit-details-marker{display:none}
.cinn-accordion summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--amber)}
.cinn-accordion details[open] summary:after{content:"−"}
.cinn-accordion details p{padding:0 18px 18px;margin:0;color:var(--muted);font-size:14px}

/* Final CTA */
.cinn-final{padding:24px 0 70px;background:#fff}
.cinn-final-card{
  position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:20px;padding:55px 70px;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,190,66,.24),transparent 24%),
    radial-gradient(circle at 10% 80%,rgba(14,190,221,.25),transparent 28%),
    linear-gradient(135deg,#072d40,#0d3d58 60%,#123b57);
  box-shadow:0 20px 45px rgba(5,42,60,.23)
}
.cinn-final-card p{max-width:1150px;margin:9px auto;color:#d8e7ec;font-size:16px}
.cinn-final-card .cinn-btn{margin-top:16px}

/* Responsive */
@media (max-width:1024px){
  .cinn-hero-services{grid-template-columns:repeat(3,1fr)}
  .cinn-hero-services div:nth-child(3){border-right:0}
  .cinn-question-grid,.cinn-core-grid,.cinn-fit-grid{grid-template-columns:repeat(2,1fr)}
  .cinn-three-cols{grid-template-columns:1fr}
  .cinn-five-cards{grid-template-columns:repeat(3,1fr)}
  .cinn-decision-grid{grid-template-columns:repeat(2,1fr)}
  .cinn-journey-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .cinn-section{padding:64px 0}
  .cinn-hero{padding-top:70px}
  .cinn-mini-card{display:none}
  .cinn-split-grid,.cinn-why-grid,.cinn-location-grid,.cinn-dual-cards{grid-template-columns:1fr}
  .cinn-ai-visual,.cinn-target-visual{height:320px}
  .cinn-dark-pills{grid-template-columns:1fr}
  .cinn-five-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .container{width:min(100% - 26px,1180px)}
  .cinn-section{padding:52px 0}
  .cinn-hero{min-height:auto;padding:64px 0 28px}
  .cinn-hero h1{font-size:38px}
  .cinn-hero p{font-size:13px}
  .cinn-hero-services{grid-template-columns:repeat(2,1fr)}
  .cinn-hero-services div{border-right:1px solid rgba(255,255,255,.1)}
  .cinn-hero-services div:nth-child(even){border-right:0}
  .cinn-question-grid,.cinn-core-grid,.cinn-fit-grid,.cinn-decision-grid,.cinn-journey-grid,.cinn-five-cards{grid-template-columns:1fr}
  .cinn-heading h2,.cinn-copy h2,.cinn-final-card h2{font-size:29px}
  .cinn-service-card,.cinn-panel-body{padding:22px}
  .cinn-final-card{padding:38px 20px;border-radius:15px}
  .cinn-progression{flex-direction:column}
  .cinn-progression i{transform:rotate(90deg)}
  .cinn-target-visual{transform:scale(.88)}
}