@charset "utf-8";

.teras-wrap *,
.teras-wrap *::before,
.teras-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.teras-wrap {
  --td:  #141E2B;
  --td2: #1E2E40;
  --td3: #253545;
  --tc:  #F5F0E6;
  --tc2: #EDE8DC;
  --tg:  #4CAF72;
  --tg2: #3A9A5E;
  --ttd: #0E1822;
  --ttm: #4A5568;
  --tw:  #FFFFFF;

  color: var(--ttd);
  background: var(--tc);
  max-width: 960px;
  margin: 10rem auto 0;
  overflow-x: hidden;
  line-height: 1.6;
}

.teras-wrap img { max-width: 100%; height: auto; display: block; }
.teras-wrap ul  { list-style: none; }
.teras-wrap a   { color: inherit; text-decoration: none; }

/* =====================================================
   COMMON SECTION BLOCKS
   ===================================================== */
.teras-sec {
  padding: 64px 40px;
}

.teras-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--tg);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.teras-h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.teras-divider {
  width: 36px;
  height: 3px;
  background: var(--tg);
  margin: 1.2rem 0 2rem;
}

.teras-lead {
  font-size: 0.88rem;
  color: var(--ttm);
  line-height: 1.9;
  margin-bottom: 2rem;
}

/* =====================================================
   01. HERO
   ===================================================== */
.teras-hero {
  background: var(--td);
  padding: 64px 40px 56px;
  position: relative;
  overflow: hidden;
}

.teras-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(76,175,114,0.07) 0%, transparent 55%);
  pointer-events: none;
}

.teras-hero-accent {
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  background: var(--tg);
}

.teras-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.teras-hero-tag {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  font-weight: 300;
  padding-top: 4px;
}

.teras-logo-mark {
  width: 26px;
  height: 18px;
  background: #1E8449;
  position: relative;
  flex-shrink: 0;
}

.teras-logo-mark::before,
.teras-logo-mark::after {
  content: '';
  position: absolute;
  left: 3px; right: 3px;
  height: 2px;
  background: rgba(255,255,255,0.7);
}

.teras-logo-mark::before { top: 3px; }
.teras-logo-mark::after  { bottom: 3px; }

.teras-logo-text {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ttd);
  line-height: 1.4;
  white-space: nowrap;
}

.teras-logo-text small {
  display: block;
  font-weight: 400;
  color: #888;
  font-size: 0.62rem;
}

.teras-hero-headline {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  color: var(--tw);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.teras-hero-headline .teras-acc { color: var(--tg); }

.teras-hero-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  line-height: 1.85;
}

.teras-hero-meta {
  display: flex;
  gap: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.teras-hero-meta-item {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}

.teras-hero-meta-item span {
  display: block;
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* =====================================================
   02. ISSUE
   ===================================================== */
.teras-issue { background: var(--tc2); }

.teras-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2rem;
}

.teras-fact {
  background: var(--tc);
  padding: 2rem 1.6rem;
  border-top: 3px solid var(--td);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.teras-fact.teras-vis { opacity: 1; transform: translateY(0); }
.teras-fact:nth-child(2) { transition-delay: 0.1s; }
.teras-fact:nth-child(3) { transition-delay: 0.2s; }

.teras-fact-lbl {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ttm);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.teras-fact-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--tg);
  line-height: 1;
  margin-bottom: 0.8rem;
}
.teras-fact-num small {
  font-size: 60%;
  font-weight: 800;
}

.teras-fact-desc {
  font-size: 0.78rem;
  color: var(--ttm);
  line-height: 1.75;
  margin-bottom: 0.8rem;
}

.teras-fact-src {
  font-size: 0.62rem;
  color: rgba(0,0,0,0.3);
}

.teras-summary-bar {
  background: var(--td);
  color: var(--tw);
  padding: 1.2rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
}

.teras-summary-bar::before {
  content: '';
  width: 4px;
  min-height: 1.2em;
  background: var(--tg);
  flex-shrink: 0;
  align-self: stretch;
}

/* =====================================================
   03. SOLUTION
   ===================================================== */
.teras-solution { background: var(--tc); }

.teras-sub-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ttm);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Step flow */
.teras-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-bottom: 2rem;
}

.teras-step {
  padding: 1.4rem 1.2rem;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.teras-step.teras-vis { opacity: 1; transform: translateX(0); }
.teras-step:nth-child(1) { background: var(--td);  transition-delay: 0s;    }
.teras-step:nth-child(2) { background: var(--td2); transition-delay: 0.07s; }
.teras-step:nth-child(3) { background: var(--td3); transition-delay: 0.14s; }
.teras-step:nth-child(4) { background: #2E4060;    transition-delay: 0.21s; }
.teras-step:nth-child(5) { background: var(--tg);  transition-delay: 0.28s; }

.teras-step-num {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.teras-step-ico {
  display: block;
  text-align: center;
  margin: 0 auto .6rem;
}
.teras-step-ico img {
  height: 40px;
  text-align: center;
  margin: 1rem auto;
}
.teras-step-title {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--tw);
  margin-bottom: 0.5rem;
}

.teras-step-desc {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
}

/* Features 4-col */
.teras-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--td3);
  border: 2px solid var(--td3);
}

.teras-feature {
  background: var(--tc2);
  padding: 1.4rem 1.2rem;
}

.teras-feature-num {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--tg);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.teras-feature-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.3rem; }
.teras-feature-sub   { font-size: 0.7rem; color: var(--ttm); }

/* =====================================================
   04. INTEGRATION
   ===================================================== */
.teras-integration { background: var(--td); }
.teras-integration .teras-h2 { color: var(--tw); }

.teras-int-lead {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.9;
  margin-bottom: 2rem;
}

.teras-int-lead strong { color: var(--tg); }

.teras-int-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
}

.teras-int-card {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2rem;
}

.teras-int-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-bottom: 1rem;
}

.teras-int-badge.detect  { background: var(--tg); color: var(--td); }
.teras-int-badge.display { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }

.teras-int-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--tg);
}

.teras-int-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}

.teras-int-feature {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.teras-int-feature:last-child { border-bottom: none; }

.teras-int-dot {
  width: 7px; height: 7px;
  background: var(--tg);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.teras-int-ft { font-size: 0.82rem; font-weight: 700; color: var(--tw); margin-bottom: 0.15rem; }
.teras-int-fd { font-size: 0.7rem; color: rgba(255,255,255,0.38); line-height: 1.6; }

.teras-int-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(76,175,114,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.teras-int-arrow-lbl {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--tg);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.teras-int-arrow-ico { font-size: 1.2rem; color: var(--tg); }

.teras-int-note {
  margin-top: 1.5rem;
  background: rgba(76,175,114,0.08);
  border-left: 3px solid var(--tg);
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

/* =====================================================
   05. DEVICES
   ===================================================== */
.teras-devices { background: var(--tc2); }

.teras-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.teras-device {
  background: var(--tc);
  padding: 1.8rem;
  border-top: 3px solid var(--td);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.teras-device.teras-vis { opacity: 1; transform: translateY(0); }
.teras-device:nth-child(2) { transition-delay: 0.1s; }
.teras-device:nth-child(3) {
  background: var(--td);
  border-top-color: var(--tg);
  transition-delay: 0.2s;
}
.teras-device-img {
  text-align: center;
  background-color: var(--tw);
  margin: 0 auto 1.8rem;
  aspect-ratio: 4/3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teras-device-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--td);
  color: var(--tg);
  margin-bottom: 0.8rem;
}

.teras-device:nth-child(3) .teras-device-badge {
  background: var(--tg);
  color: var(--td);
}



.teras-device-name  { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.teras-device-model {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tg);
  margin-bottom: 1rem;
}

.teras-device:nth-child(3) .teras-device-name  { color: var(--tw); }

.teras-device-spec-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--ttm);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.teras-device:nth-child(3) .teras-device-spec-lbl { color: rgba(255,255,255,0.35); }

.teras-device-spec-list { margin-bottom: 1.2rem; }

.teras-device-spec-list li {
  font-size: 0.72rem;
  color: var(--ttm);
  padding: 0.28rem 0 0.28rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

.teras-device-spec-list li::before {
  content: '●';
  color: var(--tg);
  font-size: 0.38rem;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
}

.teras-device:nth-child(3) .teras-device-spec-list li {
  color: rgba(255,255,255,0.45);
  border-bottom-color: rgba(255,255,255,0.05);
}

.teras-device-uc {
  background: var(--tc2);
  padding: 0.85rem;
  font-size: 0.72rem;
  color: var(--ttm);
  line-height: 1.7;
}

.teras-device:nth-child(3) .teras-device-uc {
  background: rgba(76,175,114,0.1);
  color: rgba(255,255,255,0.65);
}

.teras-device-uc strong { color: var(--tg); }

.teras-dataflow {
  margin-top: 1.5rem;
  background: var(--td);
  padding: 0.85rem 1.2rem;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  overflow-x: auto;
  white-space: nowrap;
}

.teras-dataflow strong { color: var(--tg); }

/* =====================================================
   06. USER FLOW + DEMO
   ===================================================== */
.teras-visitors { background: var(--tc); }

.teras-vf-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}

.teras-uf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}

.teras-uf-step {
  background: var(--tc2);
  padding: 1.6rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.teras-uf-step.teras-vis { opacity: 1; transform: translateY(0); }
.teras-uf-step:nth-child(2) { transition-delay: 0.08s; }
.teras-uf-step:nth-child(3) { transition-delay: 0.16s; }
.teras-uf-step:nth-child(4) { transition-delay: 0.24s; background: var(--tc); }

.teras-uf-num {
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--tg);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.teras-uf-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; }

.teras-uf-desc {
  font-size: 0.75rem;
  color: var(--ttm);
  line-height: 1.8;
}

.teras-uf-desc strong { color: var(--tg); font-weight: 700; }
.teras-democaption {font-size:0.6rem;letter-spacing:0.1em;color:var(--ttm);text-transform:uppercase;margin-bottom:0.7rem;}
.teras-demoimg { width: 100%; display: flex; align-items: center; justify-content: center; }

/* =====================================================
   07. MUNICIPALITY MERITS
   ===================================================== */
.teras-merit-sec { background: var(--tc2); }

.teras-merits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.teras-merit {
  background: var(--tc);
  padding: 1.8rem 1.4rem;
  border-top: 3px solid var(--td);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.teras-merit.teras-vis { opacity: 1; transform: translateY(0); }
.teras-merit:nth-child(2) { transition-delay: 0.07s; }
.teras-merit:nth-child(3) { transition-delay: 0.14s; }
.teras-merit:nth-child(4) { transition-delay: 0.21s; }
.teras-merit:nth-child(5) {
  transition-delay: 0.28s;
  background: var(--tg);
  border-top-color: var(--tg2);
}

.teras-merit-num {
  font-size: 2.8rem;
  font-weight: 500;
  color: rgba(0,0,0,0.07);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.teras-merit:nth-child(5) .teras-merit-num { color: rgba(255,255,255,0.18); }

.teras-merit-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  line-height: 1.45;
}

.teras-merit:nth-child(5) .teras-merit-title { color: var(--tw); }

.teras-merit-desc {
  font-size: 0.72rem;
  color: var(--ttm);
  line-height: 1.75;
}

.teras-merit:nth-child(5) .teras-merit-desc { color: rgba(255,255,255,0.8); }

/* =====================================================
   08. OPERATORS / DATA
   ===================================================== */
.teras-operators { background: var(--tc); }

.teras-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.teras-ops-card {
  background: var(--tc2);
  padding: 2rem;
}

.teras-ops-card.dark-card {
  background: var(--td);
}

.teras-ops-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--tg);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.teras-ops-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.teras-ops-card.dark-card .teras-ops-title { color: var(--tw); }

.teras-ops-text {
  font-size: 0.78rem;
  color: var(--ttm);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

.teras-ops-card.dark-card .teras-ops-text { color: rgba(255,255,255,0.45); }

/* Data table */
.teras-dt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.07);
  margin-bottom: 1rem;
}

.teras-dt-item { background: var(--tc); padding: 0.8rem 1rem; }
.teras-dt-item.span2 { grid-column: span 2; }

.teras-dt-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 0.15rem; }
.teras-dt-desc  { font-size: 0.67rem; color: var(--ttm); }

/* Opt metrics */
.teras-opt-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.teras-opt-num {
  font-size: 2rem;
  font-weight: 500;
  color: var(--ttd);
  line-height: 1;
}

.teras-opt-sub { font-size: 0.62rem; color: var(--ttm); margin-top: 0.25rem; }

/* Policy items */
.teras-policy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.05);
}

.teras-policy-item {
  background: rgba(76,175,114,0.07);
  padding: 0.6rem 0.9rem;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.6);
  border-left: 2px solid var(--tg);
}

/* Right column wrapper */
.teras-ops-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* =====================================================
   09. BEFORE / AFTER
   ===================================================== */
.teras-ba { background: var(--tc); }

.teras-ba-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--tw);
}

.teras-ba-table thead tr {
  background-color:var(--tg2);
}

.teras-ba-table th {
  padding: 0.8rem 1.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw);
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.teras-ba-table td {
  padding: 1.1rem 1.2rem;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  vertical-align: top;
}

.teras-ba-table tr:last-child    { background: var(--tg); }
.teras-ba-table tr:last-child td { border-bottom: none; color: var(--tw); }
.teras-ba-table tr:last-child td .teras-ba-num { color: var(--tw); }
.teras-ba-table tr:last-child td .teras-hi { color: var(--tw); }
.teras-ba-table tr:last-child td .teras-ba-lbl { color: var(--tw); }

.teras-ba-num   { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--tg); font-weight: 700; display: block; margin-bottom: 0.25rem; }
.teras-ba-lbl   { font-weight: 700; font-size: 0.82rem; color: var(--tg); }
.teras-ba-before { line-height: 1.65; }
.teras-ba-after  { font-weight: 500; line-height: 1.65; }
.teras-ba-after .teras-hi { color: var(--tg); font-weight: 700; }

/* =====================================================
   10. CASE STUDY
   ===================================================== */
.teras-cases { background: var(--td2); }
.teras-cases .teras-h2 { color: var(--tw); }
.teras-cases .teras-lead { color: var(--tw); }

.teras-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.teras-case {
  background: var(--tc);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.teras-case.teras-vis { opacity: 1; transform: translateY(0); }
.teras-case:nth-child(2) { transition-delay: 0.12s; }

.teras-case-hd {
  padding: 1.3rem 1.8rem;
  background: var(--td);
}

.teras-case-hd.green-hd { background: var(--tg); }

.teras-case-region {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.teras-case-hd.green-hd .teras-case-region { color: rgba(0,0,0,0.45); }

.teras-case-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--tw);
}

.teras-case-hd.green-hd .teras-case-title { color: var(--td); }

.teras-case-body { padding: 1.6rem 1.8rem; }
.teras-case-img { width: 100%; text-align: center; margin: 0 auto 1.2rem; }
.teras-case-img img { text-align: center; margin: 0 auto; }

.teras-case-list li {
  font-size: 0.77rem;
  color: var(--ttm);
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  line-height: 1.55;
  position: relative;
}

.teras-case-list li:last-child { border-bottom: none; }

.teras-case-list li::before {
  content: '●';
  color: var(--tg);
  font-size: 0.38rem;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
}

.teras-case-area {
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--td);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  border-left: 3px solid var(--tg);
}

/* =====================================================
   11. NEXT STEPS
   ===================================================== */
.teras-next { background: var(--td); }

.teras-next-headline {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--tw);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.teras-next-headline .teras-acc { color: var(--tg); }

.teras-approach-lbl {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.75rem;
}

.teras-nsteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2.5rem;
}

.teras-nstep {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2rem 1.6rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.teras-nstep.teras-vis { opacity: 1; transform: translateY(0); }
.teras-nstep:nth-child(2) { transition-delay: 0.08s; }
.teras-nstep:nth-child(3) {
  transition-delay: 0.16s;
  background: var(--tg);
  border-color: var(--tg);
}

.teras-nstep-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--tg);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.teras-nstep:nth-child(3) .teras-nstep-lbl { color: rgba(0,0,0,0.45); }

.teras-nstep-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tw);
  margin-bottom: 0.8rem;
  line-height: 1.35;
}

.teras-nstep:nth-child(3) .teras-nstep-title { color: var(--td); }

.teras-nstep-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
}

.teras-nstep:nth-child(3) .teras-nstep-desc { color: rgba(0,0,0,0.55); }

.teras-contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 1.5rem;
}

.teras-contact-text {
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

.teras-contact-co-name {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--tw);
  margin-bottom: 0.25rem;
  text-align: right;
}

.teras-contact-co-name span { color: var(--tg); }

.teras-contact-co-sub {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.04em;
  text-align: right;
}

/* ---- CTA Button ---- */
.teras-cta-wrap {
  margin-top: 3rem;
  text-align: center;
}

.teras-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--tg);
  color: var(--td);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1.15rem 3rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(76,175,114,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.teras-cta-btn:hover {
  background: var(--tg2);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(76,175,114,0.45);
}

.teras-cta-btn:active {
  transform: translateY(-1px);
}

.teras-cta-arrow {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.teras-cta-btn:hover .teras-cta-arrow {
  transform: translateX(4px);
}

.teras-cta-sub {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

/* pulse ring effect */
.teras-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--tg);
  opacity: 0;
  animation: teras-pulse 2.4s ease-out infinite;
}

@keyframes teras-pulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0;   }
}

/* =====================================================
   RESPONSIVE
   ブレークポイント:
     ~ 960px : タブレット横向き（パディング縮小）
     ~ 640px : タブレット縦 / 大きなスマホ（2カラム→1カラム）
     ~ 400px : スマホ（フォント・余白を最小化）
   ===================================================== */

@media (max-width: 1300px) {
.teras-wrap { margin: 0 auto; }
}
/* ---- 960px : 最大幅内でパディングをやや絞る ---- */
@media (max-width: 960px) {
  .teras-sec  { padding: 56px 32px; }
  .teras-hero { padding: 56px 32px 48px; }

  /* 5カラムステップ → 中間でも崩れないよう少し縮める */
  .teras-step { padding: 1.2rem 1rem; }
  .teras-step-title { font-size: 0.82rem; }
  .teras-step-desc  { font-size: 0.65rem; }

  /* メリット5列 → 小さくなりすぎるので折り返し準備 */
  .teras-merits { grid-template-columns: repeat(3, 1fr); }
  .teras-merit:nth-child(5) { grid-column: span 1; }
}

/* ---- 640px : タブレット縦 / 大きなスマホ ---- */
@media (max-width: 640px) {
  .teras-sec  { padding: 48px 20px; }
  .teras-hero { padding: 44px 20px 40px; }

  /* Hero */
  .teras-hero-top       { flex-direction: column; gap: 1rem; }
  .teras-hero-headline  { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .teras-hero-sub       { font-size: 0.85rem; }
  .teras-hero-meta      { gap: 1.8rem; }
  .teras-hero-accent    { display: none; } /* 狭い画面では左ライン非表示 */

  /* 共通見出し */
  .teras-h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  /* Facts 3列 → 1列 */
  .teras-facts { grid-template-columns: 1fr; }

  /* Step flow 5列 → 1列 + 矢印非表示 */
  .teras-steps          { grid-template-columns: 1fr; gap: 2px; }
  .teras-step::after    { display: none; }
  .teras-step           { padding: 1.2rem 1.4rem; }

  /* Features 4列 → 2列 */
  .teras-features { grid-template-columns: 1fr 1fr; }

  /* Integration 3カラム → 1カラム */
  .teras-int-grid   { grid-template-columns: 1fr; }
  .teras-int-arrow  { display: none; }
  .teras-int-card   { border-left: none; border-right: none; }
  .teras-int-card:first-child  { border-bottom: none; }
  .teras-int-card:last-child   { border-top: 1px solid rgba(255,255,255,0.08); }

  /* Devices 3列 → 1列 */
  .teras-device-grid { grid-template-columns: 1fr; }

  /* User flow: 横2カラム → 1カラム、デモを後ろに */
  .teras-vf-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .teras-uf-grid { grid-template-columns: 1fr; }

  /* Merits 3列 → 2列 */
  .teras-merits { grid-template-columns: 1fr 1fr; }
  .teras-merit:nth-child(5) { grid-column: span 2; }

  /* Operators 2列 → 1列 */
  .teras-ops-grid  { grid-template-columns: 1fr; }
  .teras-ops-right { gap: 2px; }

  /* Before/After テーブル: 3列を保ちつつ文字サイズ縮小 */
  .teras-ba-table th,
  .teras-ba-table td  { padding: 0.75rem 0.9rem; font-size: 0.75rem; }
  .teras-ba-table th:first-child,
  .teras-ba-table td:first-child { width: 110px; }

  /* Cases 2列 → 1列 */
  .teras-cases-grid { grid-template-columns: 1fr; }

  /* Next steps 3列 → 1列 */
  .teras-nsteps { grid-template-columns: 1fr; gap: 2px; }

  /* Contact縦積み */
  .teras-contact { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .teras-contact-co-name,
  .teras-contact-co-sub { text-align: left; }

  /* Dataflow 横スクロール確保 */
  .teras-dataflow { font-size: 0.64rem; padding: 0.75rem 1rem; }
}

/* ---- 400px : スマホ最小 ---- */
@media (max-width: 400px) {
  .teras-sec  { padding: 40px 16px; }
  .teras-hero { padding: 40px 16px 36px; }

  .teras-hero-headline { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .teras-hero-meta     { flex-direction: column; gap: 1rem; }

  .teras-h2 { font-size: 1.25rem; }

  /* Facts → 完全1列（すでに640で対応済み、念のため明示） */
  .teras-facts { grid-template-columns: 1fr; }

  /* Features 4列 → 1列 */
  .teras-features { grid-template-columns: 1fr; }

  /* Merits 2列 → 1列 */
  .teras-merits { grid-template-columns: 1fr; }
  .teras-merit:nth-child(5) { grid-column: span 1; }

  /* Before/After: 項目列を非表示にしてラベルをセル内に統合 */
  .teras-ba-table th:first-child,
  .teras-ba-table td:first-child { display: none; }
  .teras-ba-table th,
  .teras-ba-table td  { padding: 0.65rem 0.75rem; font-size: 0.72rem; }

  /* Opt metrics 3列 → 縦 */
  .teras-opt-metrics { grid-template-columns: 1fr; gap: 0.5rem; }
  .teras-opt-num     { font-size: 1.5rem; }

  /* Policy 2列 → 1列 */
  .teras-policy { grid-template-columns: 1fr; }

  /* Summary bar 改行対応 */
  .teras-summary-bar { font-size: 0.82rem; line-height: 1.7; }

  /* Integration カードの内余白縮小 */
  .teras-int-card { padding: 1.4rem; }

  /* Next steps カード内余白 */
  .teras-nstep { padding: 1.4rem; }

  /* Contact */
  .teras-contact-co-name { font-size: 1.1rem; }
  .teras-contact-text    { font-size: 0.92rem; }

  /* CTA button */
  .teras-cta-btn { font-size: 0.88rem; padding: 0.9rem 1.6rem; }

}